2 группы div в строку

Question

Всем привет, не могу сообразить как выровнять 2 группы div по горизонтали а именно div numbers и div numbersown. div'ы auto1 - background, auto2 - text и соответственно own1 - background, own2 - text уже настроены относительно друг друга. Внизу есть картинка, сверху как должно быть, а внизу как есть, подскажите как быть. Пробовал и float:left и display:flex и так и не получилось.

        <div class="company">
    <?php
        echo
        '<div class="numbers">',
            '<div class="auto1">','<div class="auto2">', $sql['user'], '</div>', '</div>',
        '<div class="own1">','<div class="own2">', $sql['user'], '</div>', '</div>', '</div>';
    }
        echo
        '<div class="numbersown">', '<div class="auto1own">', '<div class="auto2own">', $sql['user'], '</div>', '</div>',
        '<div class="own1own">', '<div class="own2own">', $sql['user'], '</div>', '</div>', '</div>';
    }
    ?>
    </div>

CSS
    .numbers{
     position:relative;
    }
    .numbersown{
     position:relative;
     left: 400px;
    
    }
    .company{
    position: relative;
    }

Answer 1

Попробуй для Div company в Css Display: flex;

Answer 2

.container,
.container__l,
.container__r {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  border: 2px solid red;
}

.container__l,
.container__r {
  flex: 0 1 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  margin: 5px;
  padding: 5px;
  border: 2px solid blue;
}

.item {
  margin: 5px;
  padding: 5px;
  border: 2px solid red;
}

<div class="container">
  <div class="container__l">
    <div class="item">auto1</div>
    <div class="item">auto2</div>
    <div class="item">auto3</div>
    <div class="item">auto4</div>
  </div>
  <div class="container__r">
    <div class="item">auto1own</div>
    <div class="item">auto2own</div>
    <div class="item">auto3own</div>
  </div>
</div>

БЛОГ НА HUSL

2 группы div в строку

Ответы (2 шт):