CODEWITHSUNDEEP
css
IggY
IggY

Reputation: 3135

CSS : Align label left, text right

I have a text like this :

AAA : aaaaaaaaaaaaaaaaaa
B : bbbbb
CCCCC : cccccccc

I want it to be :

AAA   : aaaaaaaaaaaaaaaaaa
B     : bbbbb
CCCCC : cccccccc

How can I do this with CSS ?

Edit : Add code, although I find it useless

<div>
    AAA : aaaaaaaaaaaaaaaaaa
    <br>B : bbbbb
    <br>CCCCC : cccccccc
</div>

Upvotes: 1

Views: 935

Answers (2)

allicarn
allicarn

Reputation: 2919

Expanding on Tushar's post, if you need a flexible width, this could be an alternative

div {
    display: table;
}
div div {
    display: table-row;
}
div span {
    display: table-cell;
}
<div>
    <div>
        <span>AAA</span><span>: aaaaaaaaaaaaaaaaaa</span>
    </div>
    <div>
        <span>B</span><span> : bbbbb</span>
    </div>
    <div>
        <span>CCCCC</span><span>: cccccccc</span>
    </div>
</div>

Upvotes: 0

Tushar
Tushar

Reputation: 87233

You've to add some element that wraps the text inside it and then you can use styles on the wrapper to set the width of the text. I've used span.

div span:first-child {
  float: left;
  width: 10%;
}
<div>
  <div><span>AAA</span><span>: aaaaaaaaaaaaaaaaaa</span>
  </div>
  <div><span>B</span><span> : bbbbb</span>
  </div>
  <div><span>CCCCC</span><span>: cccccccc</span>
  </div>
</div>

Upvotes: 2

Related Questions