ARTICLE AD BOX
I would like the “line” and “square” elements to always follow the text, for the line to take up the remaining available space, and for the line and square to never be separated when there is a line break.
.component {
display: flex;
flex-direction: row;
gap: 10px;
}
.line-and-square {
display: flex;
flex: 1;
align-items: center;
gap: 10px;
}
.line {
height: 3px;
background-color: red;
flex: 1;
}
.square {
width: 20px;
height: 20px;
background-color: red;
}
<div class="component">
<h1 class="title">How can you ensure that the line follows the text in all circumstances?</h1>
<div class="line-and-square">
<div class="line"></div>
<div class="square"></div>
</div>
</div>
Here is the current result:
Here's what I want to achieve in terms of rendering:
Or:
I just can't do it. Do you have any solutions, please?
