Align left and right-CodePudding

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 >Align</div>

<div >
zxcsdz 123
</div>
<div >
qwe 4561
</div>
<div >
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

CodePudding user response：

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 >Align</div>

<div >
    <div>
        zxcsdz
    </div>
    <div>
        123
    </div>
</div>
<div >
    <div>
        qwe
    </div>
    <div>
        4561
    </div>
</div>
<div >
    <div>
        asdsq
    </div>
    <div>
        789
    </div>
</div>

CodePudding user response：

Multiple ways do do that. You can achieve it with two inline elements and then text-align. In my example I use the flexbox and then text align.

.name {
  margin: 0 0 5px 10px;
  font-weight: bold;
  font-size: 14px;
 }
  
.row {
  margin: 0 0 5px 10px;
  display:flex;
 }
.row .r1 {
  text-align: left;
  
}
.row .r2 {
  text-align: right;  
  width: 100px;
}

<div >Align</div>

<div >
  <div >zxcsdz</div> 
  <div >123</div>
</div>

<div >
  <div >zxcsdz</div> 
  <div >123</div>
</div>

<div >
  <div >zxcsdz</div> 
  <div >123</div>
</div>

CodePudding user response：

there are many ways to do it, but you cant seperate the words and the numbers as you want, because each phrase is like one piece in your code, so you cant do much with them unless u seperate them, put each in a diffrent element tag, like a P tag, then you can use flexbox to help you with this! see my code to get a better idea

.row {
  display: flex;
  gap: 20px;
}
.num {
  text-align: right;
}

<div >
  <div >
    <p >zxcsdz</p>
    <p >qwe</p>
    <p >asdsq</p>
  </div>
  <div >
    <p >123</p>
    <p >4779</p>
    <p >789</p>
  </div>
</div>