Align left and right

December 29, 2021

Is it possible to somehow align the text in divs so that it is exactly on the edges?

.name {
  margin: 0 0 5px 10px;
  font-weight: bold;
  font-size: 14px;
 }
  
.row {
  margin: 0 0 5px 10px;
  width: 500px;
  justify-content: space-between;
 }

<div class="name">Align</div>

<div class="row">
zxcsdz 123
</div>
<div class="row">
qwe 4561
</div>
<div class="row">
asdsq 789
</div>

Now in the answer we get like this

zxcsdz 123
qwe 4561
asdsq 789

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.
Visit Medevel

But it must be exactly along the edges, something like this

zxcsdz 123
qwe 4561
asdsq 789

>Solution :

You can do something like this. I would use something other than just divs to put text inside of so your HTML is more semantic.

.name {
    margin: 0 0 5px 10px;
    font-weight: bold;
    font-size: 14px;
}

.row {
    width: 100px;
    display: flex;
    justify-content: space-between;
}

<div class="name">Align</div>

<div class="row">
    <div>
        zxcsdz
    </div>
    <div>
        123
    </div>
</div>
<div class="row">
    <div>
        qwe
    </div>
    <div>
        4561
    </div>
</div>
<div class="row">
    <div>
        asdsq
    </div>
    <div>
        789
    </div>
</div>