CSS 2 columns 50% without floats [duplicate]

Question

I want to set a 2 column div with width of 50% each without using any floats. I set the display property to inline-block. I get it right with 49% width but when I go to 50% the second div goes down.

  #first{
       background-color: aqua;
       display:inline-block;
       width: 50%;
            
   }
   #second{
       background-color: blueviolet;
       display: inline-block;
       width: 50%;
               
   }

I even tried to change box-sizing but it didn't work

Any ideas??

Answer 1

To do this use flex.

.container {
  display: flex;
}

.first,
.second {
  flex: 1;
  height: 60px;
}

.first {
  background: red;
}

.second {
  background: blue;
}

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
</div>