Как сверстать такие блоки?

Question

[Nikita]

Всем привет, делаю сайт на bs3 ну и кастомные css+js
Возник вопрос, как можно сверстать вот такой елемент? не могу сообразить.
Уже пробовал делать див парент прозрачным и т.д и все равно не могу именно понять)
Прошу помочь

Comments

[Артем]

Что именно непонятно?

[Талян]

Артем,

видимо не получается, цитирую:

и т.д

потому как он уже пробовал

див парент прозрачным

:)

[Nikita]

Артем, как это сделать)
Как правильно все разделить, и в итоге чтобы оно не сьезжало

Answer 1

[Alibek Kulseitov]

Это получается два дива в одном. На левый ставишь прозрачность на фон как написал человек выше а на правый див ставишь белый фон

Comments

[Nikita]

Вот еще трабл с тем как это сверстать.
Тобиш я делаю

<div class="Белыйфон">
<div class="Прозрачный">

 </div>
<div class="Текст">
</div>

 </div>


</div>

[Alibek Kulseitov]

Я же написал как) два блока в одном. В левом прозрачный фон в правом белый.

[Nikita]

угу, сорри не сразу сообрализ как сделать, тогда еше 1 вопрос) а как сделать чтобы наследовался первый в ширину как второй? чтобы вот такого небыло

[Alibek Kulseitov]

Не совсем понял вопрос) Вроде структура такая же как в дизайне что ты прикрепил)

[Nikita]

Alibek Kulseitov, ну чтобы тот див где "tesr" в длинну становился таким же как и тот где текст)

[Alibek Kulseitov]

Никита, ну width: 50% кааждый?

[Nikita]

Alibek Kulseitov, ну я имел ввиду вертикально, чтобы при добавление текста во второй див, он принимал вертикальное значение как второй див, чтобы просто по виду были одно целое)

[skuvaWeb]

Никита, вы наверное имели в виду высоту. задайте родителю
display: flex;

И если свойство align-items установлено в значение по умолчанию, то блоки будут одинаковыми по высоте

[Nikita]

skuvaWeb, Дааааа, спасибо большое)

Answer 2

[Артем]

.parent {
  background-color: rgba(255,255,255,.5); // фон белый с 50% прозрачностью
}

Answer 3

[Andrew Garfield]