JSFiddle - React, Tailwind, and code Playground

HTML/CSS grid

by Denis Tverdokhlebov

HTML

<div class="container">
  <div class="row">
    <div class="col col-100">
      <h1>Реферат по математике и психологии</h1>
      <h2>Тема: «Психосоматика как собственное подмножество»</h2>
    </div>
  </div>

  <div class="row">
    <div class="col col-50">
      <p><img src="https://via.placeholder.com/350x150" alt="Placeholder"></p>

      <p>Архетип, как бы это ни казалось парадоксальным, неограничен сверху. Сновидение мгновенно продуцирует метод последовательных приближений. Толпа, не вдаваясь в подробности, осознаёт позитивистский эгоцентризм, что и требовалось доказать. Первая производная дает тригонометрический абсолютно сходящийся ряд, к тому же этот вопрос касается чего-то слишком общего. Выготский разработал, ориентируясь на методологию марксизма, учение которое утверждает что, восприятие нетривиально. Интроекция, в первом приближении, транслирует ролевой импульс, и это неудивительно, если речь о персонифицированном характере первичной социализации.</p>
    </div>

    <div class="col col-50">
      <p>Более того, детерминант осознаёт интеграл Фурье. Тест, согласно традиционным представлениям, интуитивно понятен. Теорема стремительно просветляет опасный расходящийся ряд. Как отмечает Д.Майерс, у нас есть некоторое чувство конфликта, которое возникает с ситуации несоответствия желаемого и действительного, поэтому первая производная отражает предел функции.</p>

      <p>Структурный голод столь же важен для жизни, как и криволинейный интеграл охватывает интеграл Пуассона. К тому же аксиома непосредственно аннигилирует объект. Иррациональное число взаимно.</p>
    </div>
  </div>

  <div class="row">
    <div class="col col-50">
      <p>1. Структурный голод столь же важен для жизни, как и криволинейный интеграл охватывает интеграл Пуассона. К тому же аксиома непосредственно аннигилирует объект. Иррациональное число взаимно.</p>
    </div>

    <div class="col col-25">
      <p>2. Структурный голод столь же важен для жизни, как и криволинейный интеграл...

CSS

* {
  padding: 0;
  margin: 0;
}

.container {
  margin: 0 auto;
  max-width: 960px;
}

.row {
  margin: 10px -10px;
}

.row:after {
  clear: both;
  content: " ";
  display: block;
}

.col {
  box-sizing: border-box;
  float: left;
  padding: 0 10px;
}

.col-100 {
  width: 100%;
}

.col-75 {
  width: 75%;
}

.col-66 {
  width: 66.66%;
}

.col-50 {
  width: 50%;
}

.col-33 {
  width: 33.33%;
}

.col-25 {
  width: 25%;
}

@media (max-width: 960px) {
  .col {
    float: none;
  }

  .col-25,
  .col-33,
  .col-50,
  .col-66,
  .col-75 {
    width: 100%;
  }
}