two element side by side without parent

by Guillaume Seguin

HTML

<section class="container">
  <div class="price">
    <label>
      Prix
      <input type="text" placeholder="min" value="" />
    </label>
    <label>
      &nbsp;
      <input type="text" placeholder="max" value="" />
    </label>
  </div>
  <div class="square-price">
    <label>
      Prix m2
    <input type="text" placeholder="min" value="" />
    </label>
    <label>
      &nbsp;
      <input type="text" placeholder="max" value="" />
    </label>
  </div>
</section>

CSS

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));;
  column-gap: 4px;
}

.price {
  display: flex;
  column-gap: 4px;
}

.square-price {
  display: flex;
  column-gap: 4px;
}


label {
  display: flex;
  flex-direction: column;
}

input {
  width: 94px;
  padding: 0;
  border: 1;
}