exclude element with :not in grid layout

Question

I have a page where I can only modify the css. I try realize a 2 column layout and to exclude one element from the grid layout. Here is an example of the html and my css:

<div class="container">
  <hr>
  <div>
    <p>Variable 1</p>
    <p>Input 1</p>
  </div>
  <div>
    <p>Variable 2</p>
    <p>Input 2</p>
  </div>
  <div>
    <p>Variable 3</p>
    <p>Input 3</p>
  </div>
  <div>
    <p>Variable 4</p>
    <p>Input 4</p>
  </div>
  <div>
    <p>Variable 5</p>
    <p>Input 5</p>
  </div>
  <div>
    <p>Variable 6</p>
    <p>Input 6</p>
  </div>
  <div>
    <p>Variable 7</p>
    <p>Input 7</p>
  </div>
</div>

.container:not(hr) {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

How can I exlude the hr element?

Answer 1

You need to select "all direct child elements", something like this:

(added the border so you can see the divs laid out)

.container > *:not(hr) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px dotted pink;
}

<div class="container">
  <hr>
  <div>
    <p>Variable 1</p>
    <p>Input 1</p>
  </div>
  <div>
    <p>Variable 2</p>
    <p>Input 2</p>
  </div>
  <div>
    <p>Variable 3</p>
    <p>Input 3</p>
  </div>
  <div>
    <p>Variable 4</p>
    <p>Input 4</p>
  </div>
  <div>
    <p>Variable 5</p>
    <p>Input 5</p>
  </div>
  <div>
    <p>Variable 6</p>
    <p>Input 6</p>
  </div>
  <div>
    <p>Variable 7</p>
    <p>Input 7</p>
  </div>
</div>

Answer 2

Use 'position: absolute' for the hr

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px dotted pink;
}

hr {
  position: absolute;
}

<div class="container">
  <hr>
  <div>
    <p>Variable 1</p>
    <p>Input 1</p>
  </div>
  <div>
    <p>Variable 2</p>
    <p>Input 2</p>
  </div>
  <div>
    <p>Variable 3</p>
    <p>Input 3</p>
  </div>
  <div>
    <p>Variable 4</p>
    <p>Input 4</p>
  </div>
  <div>
    <p>Variable 5</p>
    <p>Input 5</p>
  </div>
  <div>
    <p>Variable 6</p>
    <p>Input 6</p>
  </div>
  <div>
    <p>Variable 7</p>
    <p>Input 7</p>
  </div>
</div>