Как разместить блоки div (см. фото)?

Question

[alexis_berg]

Мне нужно реализовать такой блок div на сайте (см. фото), но не совсем понимаю как это можно сделать именно чтобы число и описание находились на одной строчке, и Описание и текст под ним были в одной вертикали, но при этом чтобы данный блок был адаптивным под разные экраны. Как это можно реализовать? если выполнять мой код, то блок div с классом number и с классом subheading находятся друг над другом, но не рядом.

<div class="heading">/заголовок</div>
<div class="about">
      <div class="column flex-column">
        <div class="number">01</div>
        <div class="subheading">Первое описание</div>
        <div class="description">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. 
        </div>
<div class="column flex-column">
        <div class="number">02</div>
        <div class="subheading">Второе описание</div>
        <div class="description">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. 
        </div>
<div class="column flex-column">
        <div class="number">03</div>
        <div class="subheading">Третье описание</div>
        <div class="description">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. 
        </div>
<div class="column flex-column">
        <div class="number">04</div>
        <div class="subheading">Четвертое описание</div>
        <div class="description">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. 
        </div>
<div class="column flex-column">
        <div class="number">05</div>
        <div class="subheading">Пятое описание</div>
        <div class="description">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. 
        </div>
<div class="column flex-column">
        <div class="number">06</div>
        <div class="subheading">Шестое описание</div>
        <div class="description">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. 
        </div>
      </div>

.heading {
  font-size: 28px;
  font-weight: bold;
  margin-left: calc(7% - 10px);
}
.about {
  width: 85%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}
.number {
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  font-weight: bold;
}
.subheading {
  display: inline-block;
  vertical-align: top;
  font-size: 28px;
  font-weight: bold;
}
.description {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 10px;
}
.column {
  padding: 5px;
  border-radius: 5px;
}
.flex-column {
  display: flex;
  flex-direction: column;
}

Comments

[Александр Васильев]

Полный ппц.

Answer 1

[IvanU7n]

примерные добавки:

.column {
  position: relative;
}
.number {
  position: absolute;
  right: calc(100% + 5px);
  top: 0;
}

да и .flex-column для приведённого примера не особо нужен

Answer 2

[Kentavr16]

Вот один из многих вариантов решения. Немного переписал под флекс, но если хочешь для контейнера оставить грид принцип тот же. и да, ты забыл проставить закрывающие теги для каждого дочернего элемента, поэтому работало через одно место. И цифру можно допозиционировать согласно твоих нужд.

Answer 3

[UthvfyV]

<style>.heading {
  font-size: 28px;
  font-weight: bold;
  margin-left: calc(7% - 10px);
  display: inline-block;
  width: auto;
}
.about {
  width: 100%;
  margin: 0;
display: block;
text-align: center;
}
.number {
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  margin: 5px;
  font-weight: bold;
}
.subheading {
  display: block;
  vertical-align: top;
  width: 100%;
}
.column-title {
display: inline-block;
vertical-align: top;
font-weight: bold;
margin: 5px;
line-height: 1;
font-size: 28px;
}
.description {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 10px;
}
.column {
  padding: 5px;
  width: 28%;
  margin: 10px;
  text-align: left;
  border-radius: 5px;
  display: inline-block;
}</style>

<div class="heading">/заголовок</div>
<div class="about">
<div class="column">
<div class="subheading">
<span class="number">01</span>
<span class="column-title">Первое описание</span></div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. 
</div></div>
<div class="column">
<div class="subheading">
<span class="number">02</span>
<span class="column-title">Второе описание</span></div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. 
</div></div>
<div class="column">
<div class="subheading">
<span class="number">03</span>
<span class="column-title">Третье описание</span></div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. 
</div></div>
<div class="column">
<div class="subheading">
<span class="number">04</span>
<span class="column-title">Четвертое описание</span></div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. 
</div></div>
<div class="column">
<div class="subheading">
<span class="number">05</span>
<span class="column-title">Пятое описание</span></div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. 
</div></div>
<div class="column">
<div class="subheading">
<span class="number">06</span>
<span class="column-title">Шестое описание</span></div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. 
</div></div></div>