Можно ли иметь макет ниже без использования абсолютного положения

Question

Я хочу избежать каких-либо изменений в HTML, так как это может вызвать регрессию в других макетах и ​​дизайнах.Так как мы используем один и тот же шаблон для всех дизайнов и макетов.

Требуется выполнить приведенный ниже макет без использования абсолютного положения для .content2.И content2 и content3 должны иметь одинаковую высоту.

.wrapper {
  display: flex;
}

.content {
  background: red;
}

.content2 {
  background: green;
}

.content3 {
  background: yellow;
}

.newLayout {
  position: relative;
}

.newLayout .content2 {
  position: absolute;
  right: 0;
  width: 92px;
  padding: 2px 10px;
}

.newLayout .content3 {
  white-space: nowrap;
  margin-top: 20px;
  padding: 10px;
}

<div class="wrapper newLayout">
  <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentia</div>
  <div class="content2">Content Two</div>
  <div class="content3">Content Three</div>
</div>

Answer 1

Попробуйте эту скрипку Скрипка здесь

.wrapper {
display: flex;
}
.leftBox{
background:red
}
.leftBox, .rightBox{display:flex;flex-flow:column;}
.contentTwo, .contentThree{height:50%}
.contentTwo{background:green;}
.contentThree{background:yellow;}

Answer 2

.wrapper {
  display: grid;
  grid-template-columns: 1fr, 92px;
  grid-template-rows: 1fr, 1fr;
}

.content {
  grid-area: 1/1/3/2;
  background: red;
}

.content2 {
  grid-area: 1/2/2/3;
  background: green;
}

.content3 {
  grid-area: 2/2/3/3;
  background: yellow;
}

<div class="wrapper">
  <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentia</div>
  <div class="content2">Content Two</div>
  <div class="content3">Content Three</div>
</div>

Answer 3

С flexbox вам понадобится вложенных флексбоксов , чтобы иметь этот макет.2D-макет, подобный этому, будет идеальным случаем для CSS grids - см. Демонстрацию ниже:

.wrapper {
  display: grid;
  grid-template-areas: "one two" "one three";    
}

.content {
  background: red;
  grid-area: one;
}

.content2 {
  grid-area: two;
  background: green;
}

.content3 {
  grid-area: three;
  background: yellow;
}

<div class="wrapper">
  <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentia</div>
  <div class="content2">Content Two</div>
  <div class="content3">Content Three</div>
</div>