Как сделать так, чтобы элементы следовали за текстом? ⇐ Html

[Anonymous]

Мне бы хотелось, чтобы элементы «line» и «square» всегда следовали за текстом, чтобы строка занимала оставшееся доступное пространство и чтобы линия и квадрат никогда не разделялись при разрыве строки.

Код: Выделить всё

.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;
}

Код: Выделить всё

How can you ensure that the line follows the text in all circumstances?

Вот текущий результат:



Вот чего я хочу добиться с точки зрения рендеринга:



Или:



Я просто не могу этого сделать. Подскажите, пожалуйста, есть ли у вас какие-нибудь решения?

Подробнее здесь: https://stackoverflow.com/questions/799 ... w-the-text