-1

Quero deixar as div lado a lado e se possível com um linha vertical dividindo

Tentei com div container assim mas nao deu certo:

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


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

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

em 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>
1
  • e onde está o html com as divs? coloca na pergunta Commented 31/01/2021 às 2:35

1 Resposta 1

0

Creio que a forma mais simples de conseguir aquilo que pretende é utilizando flex. Basicamente terá que colocar o seu código html numa div que terá display: flex definido. Depois, cada uma das colunas tem uma classe col aplicada que define a largura de 50%.

Quanto à linha vertical, pode fazê-lo definindo o border-right da primeira coluna.

Aqui fica um exemplo baseado no seu código:

.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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .