I have an issue where I want to display a number next to a line of text. If the text wraps onto two lines I thought it would be better to use flexbox to lay the text and number out.
When the text wraps onto two lines it fills the available width, and pushes the number to the end of the line. How do I prevent this?
Code using tailwind here
<div class="container flex justify-between">
<div class="w-1/4 flex flex-start items-start pr-2 border">
This is some text<span class="ml-1 font-semibold">(13)</span>
</div>
<div class="w-1/4 flex flex-start items-start pr-2 border">
This is some text, and something else <span class="ml-1 font-semibold">(13)</span>
</div>
<div class="w-1/4 flex flex-start items-start pr-2 border">
This is some text, and <span class="ml-1 font-semibold">(13)</span>
</div>
<div class="w-1/4 flex flex-start items-start pr-2 border">
This is some text, and something else <span class="ml-1 font-semibold">(13)</span>
</div>
</div>
Example here: https://codepen.io/clintongreen/pen/dyGJRMB