Without wrapping the two <span>s in their own span or <div> and without putting the Lorem ipsum... in its own, what CSS would make the Lorem ipsum... start BELOW and not BETWEEN the two pink <span>s?
.container {overflow:auto}
.left {float:left; background-color:pink}
.right {float:right; background-color:pink}<div class="container">
<span class="left">LEFT</span>
<span class="right">RIGHT</span>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</div>1
Does it have to be in the th tag? It would be easier with a div.
table {
width: 100%;
}
th {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
th span {
flex-basis: 50%;
}
.left {
text-align: left;
}
.right {
text-align: right;
}<table>
<tr>
<th>
<span class="left"> text to the left </span>
<span class="right"> text to the right </span> and then a lot of text below
</th>
</tr>
</table>