<div id='containerTotal'>
  
  <h1>Exemplo - Elemento Div</h1>
  <div class='containerDivs'>
    <div class="demoDiv">
      <h2>Primeiro elemento div</h2>
      <p>Parágrafo dentro do primeiro elemento div.</p>
    </div>

    <div class="demoDiv">
      <h2>Segundo elemento div</h2>
      <p>Parágrafo dentro do segundo elemento div.</p>
    </div>

    <div class="demoDiv">
      <h2>Terceiro elemento div</h2>
      <p>Parágrafo dentro do terceiro elemento div.</p>
    </div>
  </div>
</div>

#containerTotal {
  padding: 0px 20px 30px;
  display: flex;
  flex-direction: column;
  background-color: orange;
}

.containerDivs {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.demoDiv {
  width: 30%;
  border: 5px outset red;
  background-color: yellow;
  font-weight: 600;
  text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.