С помощью bootstrap сделал такую верстку
<div class="card">
<div class="row">
<div class="col-md-1 col-sm-1 col-1 col-lg-1">
<div class="orange-line">.</div>
</div>
<div class="col-md-11 col-sm-11 col-11 col-lg-11">
<div class="row">
<div class="col-md-10 col-sm-10">Large content</div>
<div class="col-md-2 col-sm-2">Small content</div>
</div>
</div>
</div>
</div>
Стиль оранжевой линии
.orange-line {
border-left: 10px solid #ff8800;
color: #ffffff;
}
То, что получилось, можно посмотреть вот тут
Вопрос в том, как сделать так, чтобы оранжевая линия всегда была той же высоты, что и блок card (занимала всю его высоту). Сейчас при разной ширине экрана она одной и той же высоты.