Здравствуйте!
Бьюсь с проблемой отображения декоративной полоски на одной строке с заголовком.

Т.е есть следующее:

<h2>Каталог оборудования</h2><div class="blue-line"></div>

Идёт заголовок, а дальше в той же строке правее заголовка должна идти синяя полоска и занимать всё оставшееся пространство по ширине.

Пишу такой css:

.blue-line {
	display:inline;
	background:#0099ff;
	height:10px;
	width:100%;	
}

но полоса появлятся ниже заголовка.

Если ставлю меньший процент width, то всё ок, но ведь у меня будут заголовки меньшей ширины, и тогда эта полоска будет не на всю оставшуюся ширину.

Кстати, ширина у меня ограничена 1000px.

Помогите, пожалуйста, с решением.

Спасибо

<div class="wrapper">
    <h2>Каталог оборудования</h2><div class="blue-line"></div>
</div>

.wrapper {
    display: flex;
    align-items: center;
}

.wrapper h2 {
    flex-shrink: 0;
    margin-right: 20px;
}

.wrapper .blue-line {
	background: #0099ff;
	height: 10px;
    width: 100%;
}

https://jsfiddle.net/hcx4s0qk/

_____________

Профессиональная разработка на заказ

Я на GitHub | второй профиль

Круто, спасибо огромное.