In CSS and HTML how can I leave side by side?

Question

I want to leave the div side by side and if possible with a vertical line dividing

I tried div container like this but it didn’t work:

div {
width: 100px;
height: 100px;
display: inline-block;
}


#container-a {
  
  background-color: white;
}

#container-b {
 background-color: white;
}

---

in HTML

 <div id= "container-a">

     <label for="input">Qual seu nome? </label>
        <input type="text" id=valor>
                <input type="submit" onclick="capturar()" value="Escreva Seu eu nome">
                <p id="valorDigitado"></p>
   </div>
//dividir e colocar lado a lado aqui 
<div id= "container-b">
        
    <label for="input">Qual a data do seu nascimento? </label>
        <input type="number" id="date" placeholder="data">
        <input type="number" id="month" placeholder="mês">
        <input type="number" id="year" placeholder="ano">
    
        <button id="calc-btn">Calcular Idade</button>
    
        <p id="show-age"></p>
<div>

Answer 1

I believe that the simplest way to achieve what you want is to use flex. Basically you have to put your html code in a div that you have display: flex defined. Then each of the columns has a class col applied setting the width of 50%.

As for the vertical line, you can do this by defining the border-right first column.

Here is an example based on your code:

.col-wrapper {
  display: flex
}

.col {
  width: 50%;
  padding: 10px;
}

.col:first-of-type {
  border-right: 1px solid black;
}

<div class="col-wrapper">
  <div class="col">
    <label for="input">Qual seu nome?</label>
    <input type="text" id=valor>
    <input type="submit" onclick="capturar()" value="Escreva Seu eu nome">
    <p id="valorDigitado"></p>
  </div>
  <div class="col">
    <label for="input">Qual a data do seu nascimento? </label>
    <input type="number" id="date" placeholder="data">
    <input type="number" id="month" placeholder="mês">
    <input type="number" id="year" placeholder="ano">
    <button id="calc-btn">Calcular Idade</button>
    <p id="show-age"></p>
  </div>
</div>