JSFiddle - React, Tailwind, and code Playground

by Michael Danilov

HTML

<div class="wrapper wrapper1">
    <!-- строка 1 -->
    <div class="div">Раз 11</div>
    <div class="div">Два 11</div>
    <!-- строка 2 -->
    <div class="div">Раз 12</div>
    <div class="div">Два 12</div>
    <!-- строка 2 как получится -->
    <div class="div">Три 12</div>
</div>
<hr>
<div class="wrapper wrapper2">
    <!-- строка 1 -->
    <div class="div">Раз 21</div>
    <div class="div">Два 21</div>
    <!-- строка 2 -->
    <div class="div">Раз 22</div>
    <div class="div">Два 22</div>
    <!-- строка 2 как получится -->
    <div class="div">Три 22</div>
</div>
<hr>
<div class="wrapper wrapper4">
    <!-- строка 1 -->
    <div class="wrapper4i">
        <div class="div">Раз 41</div>
        <div class="div">Два 41</div>
    </div>
    <!-- строка 2 как получится -->
    <div class="wrapper4i">
        <div class="div">Раз 42</div>
        <div class="div">Два 42</div>
        <div class="div">Три 42</div>
    </div>
    <!-- строка 2 как получилось :( -->
</div>

CSS

/* .wrapper - обёртка, .div твои однолинейники */
.wrapper {
  border: 1px solid #000;
  width: 120px;
  /*height: 50px;*/
}
.div {
  border: 1px solid #f00;
  box-sizing: border-box; /* чтобы граница стала внутри высоты и ширины */
  /*height: 50px;*/
  /*width: 50px;*/
}
hr {
  border: 0;
  border-top: 1px dashed #ccc;
  margin: 10px 0;
}
/* 1. IE6+ через плавающие блоки "влево", но нужна обёртка, потому что блоки вырезаются из контекста и блоки за ними будут обтекать их, поэтому .wrapper и нужен с clearfix ;) */
.wrapper1 {
}
.wrapper1:before,
.wrapper1:after {
  content: " ";
  display: table;
}
.wrapper1:after {
  clear: both;
}
.wrapper1 > .div {
  display: block;
  float:left;
}
/* 2. IE9+ методика inline div, т.е. блокам говорят, что они блоки, но строчные, поэтому между блоками пробел считается пробелом и занимает место в зависимости от размера шрифта, поэтому у блока родителя убирают размер текста */
.wrapper2 {
  font-size: 0;
}
.wrapper2 > .div {
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
}
/* 3. есть ещё flexbox модели, но я не помню синтаксиса, да и IE там плох. */

/* 4. твои таблицы. По-хорошему нужна ещё одна обёртка со стилем "таблица", потому что не все браузера любят строку из таблицы без самой таблицы */
.wrapper4 {
  display: table;
}
.wrapper4i {
  display: table-row;
}
.wrapper4i > .div {
  display: table-cell;
  vertical-align: top;
}