I have a unique set of items, each consisting of:
- A left side that expands horizontally to occupy the space where the item name is located.
- A right box at the end containing a few actions.
My goal is to ensure that the box with actions on the right wraps when it clashes with the text on the left. The challenge lies in the varying sizes and names of different items. Is there a way to standardize the size of the left side similar to tables?
I want to maximize the text display, so it would be ideal to find a solution where once one row wraps, the others follow suit.
Below is a basic sketch illustrating my objective:
https://i.sstatic.net/Xmsjf.png
Additionally, here's a sample implementation of what I currently have, which wraps but not simultaneously:
.Box {
padding: 1rem
}
.Row {
align-items: stretch;
display: flex;
flex-wrap: wrap;
}
.Fill {
flex: 1 1 auto;
}<div class="Box">
<div class="Row">
<div class="Fill">
<span>Some text not too big</span>
</div>
<div>
<span>Same width</span>
</div>
</div>
<div class="Row">
<div class="Fill">
<span>Some text that will be absolutely big for real</span>
</div>
<div>
<span>Same width</span>
</div>
</div>
</div>