I have this example below and I am looking to always display the blue item text on a single line, regardless of how much content is inside. (dynamic content) Essentially, I want the red item to shrink in width when the blue item has more text.
Is there a way to achieve this?
Thank you
PS. Please do not question my use of flex here. It is necessary for a larger example where it is needed, this example is just simplified.
.flexbox {
display: flex;
}
.red {
background: red;
}
.blue {
background: blue;
}<div class="flexbox">
<div class="red">red red red red red red red red red red red red red red red red red red red red red red </div>
<div class="blue">blue blue blue blue blue</div>
</div>