-1

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
3
  • 3
    Are you maybe looking for the <table> tag?
    – jonas
    Sep 13 at 11:11
  • 1
    Read this page: stackoverflow.com/tags/html-table/info
    – TylerH
    Sep 13 at 13:36
  • 1
    Not a fix but note that the <br> tag does not use and does not need a closing slash and never has in any HTML specification
    – Rob
    Sep 13 at 14:59

2 Answers 2

1

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

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.

1
  • This doesn't appear to be tabular data so a table wouldn't be appropriate.
    – Rob
    Sep 13 at 15:01

Not the answer you're looking for? Browse other questions tagged or ask your own question.