<section>
<div class="heading">/заголовок</div>
<div class="about">
<div class="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>
<div class="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>
<div class="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>
<div class="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>
<div class="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>
<div class="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> </div>
</section>
section {
font-family: sans-serif;
width: 85%;
margin: 0 auto;
}
.heading {
font-size: 28px;
font-weight: bold;
}
.about {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px 40px;
}
.column {
position: relative;
}
.number {
font-weight: bold;
position: absolute;
right: calc(100% + 5px);
top: 0;
}
.subheading {
font-size: 28px;
font-weight: bold;
}
.description {
line-height: 1.5;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.