Imagine having the following code snippet. Essentially, I have a layout that needs to display 'vs prev period' with a percentage in the same line. To achieve this, I utilized display: flex.
The issue arises when we require the gap between the two children to always remain at 2px during rendering. However, if the content of either child is too lengthy and wraps onto a second line (as intended), it results in additional whitespace in the left child, causing the gap between the children to exceed 2px.
I've included a screenshot highlighting the problematic space within a blue box, consequently disrupting the desired 2px gap between the elements: https://i.stack.imgur.com/0g1C9.png
Hence, the question remains - is there a method to eliminate this extraneous whitespace (indicated by the blue box) to consistently maintain the 2px gap?
Our design objective:
https://i.stack.imgur.com/W2eF0.png
Thank you.
p/s: Implementing word-break: break-all solely on the left child isn't an ideal UX remedy; we still prefer word breaks while eliminating any superfluous spaces.
.parent{
display:flex;
max-width: 200px;
gap: 2px;
margin-bottom: 20px;
}
.text{
background: yellow
}
.number {
background: lightblue;
}<div class='parent'>
<div class='text child'>vs prev period</div>
<div class='number child'>1.23%</div>
</div>
<div class='parent'>
<div class='text child'>vs prev period vs prev vs prev</div>
<div class='number child'>1.23%</div>
</div>
<div class='parent'>
<div class='text child'>vs prev period</div>
<div class='number child'>3,221,189,823.23%</div>
</div>