HTML align flex-CodePudding

Currently, I have three text elements below each other. Two of them are aligned left and I am happy with that. The third one is aligned right, which is okay. However, it would be nicer if the third one was aligned with the right border of the bigger of the first two elements. Is this relatively simple to archive?

<!DOCTYPE html>
<html>
<style>
p.date{
    text-align: right
}
</style>
<body>

<h2>Some basic HTML</h2>

<p > 5th of January </p>


<p>This text element is aligned left by default.</p>
<p>This is the second text. It would be nice to have the date aligned with the right end of the text.
    <br>  This time the second text is a little longer but it might be the other way around next time.
</p>


</body>
</html>

CodePudding user response：

There are many ways to achieve that. You can add the display: inline-block property to the body or to a container div:

<!DOCTYPE html>
<html>
<style>
p.date{
    text-align: right
}
#container{
    display: inline-block;
}
</style>
<body>

<div id="container">
<h2>Some basic HTML</h2>

<p > 5th of January </p>


<p>This text element is aligned left by default.</p>
<p>This is the second text. It would be nice to have the date aligned with the right end of the text.
    <br>  This time the second text is a little longer but it might be the other way around next time.
</p>
</div>

</body>
</html>

CodePudding user response：

try adding align:

<!DOCTYPE html>
<html>
<style>
p.date{
    text-align: right
}
</style>
<body>

<h2>Some basic HTML</h2>

<p > 5th of January </p>


<p>This text element is aligned left by default.</p>
<p align='right'>This is the second text. It would be nice to have the date aligned with the right end of the text.
<br> 
<p align='left'>This time the second text is a little longer but it might be the other way around next time.
</p>


</body>
</html>