I am facing a specific scenario where I have three inline-elements. Two of them are essentially the same, but the one in the middle has an unknown width.
I want to achieve one of two things:
- Have all three elements display inline on the same row
- If the width is too small, stack all three elements on top of each other
Using the display: inline-element property doesn't quite meet my requirements, as it will collapse when needed and might not align properly according to the desired conditions.
.div-a {
background-color: red;
}
.div-b {
background-color: blue;
}
div {
display: inline-block;
font-size: 4em;
} <div class="div-a">
L
</div>
<div class="div-b">
Mid
</div>
<div class="div-a">
R
</div>Is there a way to ensure that either all blocks are stacked or displayed inline? Keep in mind that the width of the middle element will always be unknown.
EDIT: I'm not sure why this was flagged as a duplicate, as my question is not solely about using media query resizing as a solution.