CODEWITHSUNDEEP
htmlcss
vin_Bin87
vin_Bin87

Reputation: 348

Line up contents of multiple <p> tags in 2 ways

So, basically I have the following:

<h5 className='admin-notice'><span className={`${klass}teal`}>Teal</span> - Random Text one</h5>
<h5 className='admin-notice'><span className={`${klass}blue`}>Purple</span> - Some other random text</h5>
<h5 className='admin-notice'><span className={`${klass}red`}>Red</span> - Hey there random</h5>
<h5 className='admin-notice'><span className={`${klass}grey`}>Grey</span> - hi</h5>
<h5 className='admin-notice'><span className={`${klass}yellow`}>Yellow</span> - this is random</h5>
<h5 className='admin-notice'><span className={`${klass}green`}>Green</span> - its howdie doodie time</h5>

So each element has text to the left followed by a break, -, and then more text. I want it so all the text for each element after the - begins at the same spot and is lined up. How do I do this? Below is a screenshot of how it is currently looking. enter image description here

Upvotes: 1

Views: 49

Answers (3)

UkFLSUI
UkFLSUI

Reputation: 5672

Use manual width to your span element and set the display property to inline-block. This should work:

.alignText {
  display: inline-block;
  width: 85px;
}
<h3><span class="alignText">Teal - </span><span>Random Text one</span></h3>
<h3><span class="alignText">Purple - </span><span>Some other random text</span></h3>
<h3><span class="alignText">Red - </span><span>Hey there random</span></h3>
<h3><span class="alignText">Grey - </span><span>hi</span></h3>
<h3><span class="alignText">Yellow - </span><span>this is random</span></h3>
<h3><span class="alignText">Green - </span><span>its howdie doodie time</span></h3>

Upvotes: 0

Meliodas
Meliodas

Reputation: 337

You could wrap your span elements inside p elements with fixed width and inline-block display. For example: 

<h5 className='admin-notice'><p style="width:300px; display:inline-block; margin:0;" ><span className={`${klass}teal`}>Teal</span></p>- Random Text one</h5>
<h5 className='admin-notice'><p style="width:300px; display:inline-block; margin:0;" ><span className={`${klass}blue`}>Purple</span></p> - Some other random text</h5>
<h5 className='admin-notice'><p style="width:300px; display:inline-block; margin:0;" ><span className={`${klass}red`}>Red</span></p> - Hey there random</h5>
<h5 className='admin-notice'><p style="width:300px; display:inline-block; margin:0;" ><span className={`${klass}grey`}>Grey</span></p> - hi</h5>
<h5 className='admin-notice'><p style="width:300px; display:inline-block; margin:0;" ><span className={`${klass}yellow`}>Yellow</span></p> - this is random</h5>
<h5 className='admin-notice'><p style="width:300px; display:inline-block; margin:0;" ><span className={`${klass}green`}>Green</span></p> - its howdie doodie time</h5>

NOTE: This is just an example, use whatever width suits your case.

Upvotes: 0

Cole
Cole

Reputation: 13

There is not a simple and flexible way to do this. You could use spaces, but that wouldn't work well if you wanted to add more items.

I would use a table with two columns:

<table>
    <tr>
        <td>
            <h5 className='admin-notice'>
                <span className={`${klass}teal`}>Teal</span> - 
            </h5>    
        </td>   
        <td>
            <h5 className='admin-notice'>
                Random Text one
            </h5>
        </td>
    </tr>
    ...
</table>

You can also adjust the margin and alignment in each cell. td { padding: 1px; text-align: left; }. W3Schools has lots of information on Tables and other HTML & CSS elements.

Upvotes: 1

Related Questions