I'm working on a flexbox layout with two columns, each containing text.
The text in the left column is aligned to the left, while the text in the right column is aligned to the right.
However, I want the text in the right column to switch to left alignment when the viewport is resized and the columns wrap.
For a visual example, check out this JSFiddle
HTML
<div class="leftContainer">
This is my left-aligned text
</div>
<div class="rightContainer">
This text should be right-aligned if the box doesn't wrap, and left-aligned if it does.
</div>
</div>
CSS
.mainContainer{
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
.leftContainer{
text-align: left;
}
.rightContainer{
text-align: right;
}
In this case, both containers are properly aligned according to their positions
When the container wraps, the text in "rightContainer" should be left-aligned.
I've tried using media queries but sometimes they don't work as intended because the text may not be long enough for the row to break.
Any suggestions on how to solve this issue?