Align left and right

Issue

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

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>

Answered By - Benjamin Kile