Как сделать что бы 2 блока div были в обну линию, тоесть без table
на примере такого:

Вы можете использовать CSS для расположения двух блоков `div` на одной линии без использования таблицы. Существует несколько способов сделать это. Вот один из них с использованием CSS свойства `display: inline-block;`:
HTML:
```html
<div class="container">
<div class="block"></div>
<div class="block"></div>
</div>
```
CSS:
```css
.container {
font-size: 0; /* Используется для устранения пробелов между блоками */
}
.block {
width: 50%; /* Ширина каждого блока (может быть адаптирована по вашему усмотрению) */
height: 100px; /* Высота блока (может быть адаптирована по вашему усмотрению) */
display: inline-block; /* Устанавливаем блоки в ряд */
background-color: #ccc; /* Цвет фона блоков (может быть изменен) */
}
```
Этот код создаст два блока `div` на одной линии внутри родительского контейнера. Обратите внимание, что свойство `font-size: 0;` для контейнера используется для устранения пробелов между блоками, поскольку блоки `div` воспринимаются браузером как строчные элементы, и могут появиться небольшие пробелы из-за разрывов строк в HTML коде.
Копай в сторону Flexbox или Grid
давал когда-то пример :
https://fairy-tales-for-you.firebaseapp.com/color-grid.html
дивы в сетке
Ну раз ты открыл девтулзы, может кликнешь на родительский контейнер и посмотришь на его стили? Увидишь, что там применяется flex или grid