Question 245611 in Html Question posted in
Some basic documentation can be found here.

How to create alignment text in multiple <p/> tags and <em/> in HTML

I am display two rows of text, I used </em> since I want aligntext1 to have red color only.

<div>
<p> tesing12345678910 <em className="text-read-50">aligntext1</em>
<br/> tes123 <em className="text-read-50">aligntext2</em> </p>         
</div>

How can I create something like this, making aligntext to be the same "column".

tesing12345678910 aligntext1
tes123            aligntext2
Tags:

2

Answers


  1. 0

    as jonas said. you can use table tag without border.

    .text-read-50 {
    color: red;
}
     <table>
    <tr>
      <td>tesing12345678910</td>
      <td><em class="text-read-50">aligntext1</em></td>
    </tr>
    <tr>
      <td>tes123</td>
      <td><em class="text-read-50">aligntext2</em></td>
    </tr>
 </table>

    you can also omit the tag and move the CSS class to <td> if you just need to color the aligntext without making the text italic.

    Login or Signup to reply.
  2. 0

    You could do something like this

    .row{
display:flex;
flex-direction: row;
}

.column{
display:flex;
flex-direction: column;
}

.text-red-50{
color:red;
}
    <!DOCTYPE html>
<html>
<body>

<div class="row">
  <div class="column">
    <p> tesing12345678910 </p>
    <p> test123 </p>
  </div>
    <div class="column">
    <p class="text-red-50"> aligntext1 </p>
    <p class="text-red-50"> aligntext2 </p>
  </div>
</div>

</body>
</html>

    If you want to learn more about flex container, like how to add space between the columns and else, here is a link for docs

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search