Usando Flexbox

by giordanna

HTML

<div class="wrapper">
  <div class="coluna">
  <h3>
    Formulário parte 1
  </h3>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in consequat nisi. Donec a ante vitae quam viverra cursus. Donec dolor nisi, finibus sed justo vel, commodo malesuada sapien. Donec est magna, ornare sed tincidunt nec, laoreet at elit. Nullam efficitur lobortis mauris vel tincidunt. Fusce ac est et mauris mollis dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec hendrerit, leo eu ornare porttitor, magna mauris vulputate neque, vitae posuere felis metus vitae lectus.
   </p>
  </div>

  <div class="coluna">
  <h3>
    Formulário parte 2
  </h3>
    <p>
      In pharetra, enim sed fermentum congue, velit ligula convallis turpis, vitae pulvinar arcu velit non ipsum. Nam justo ex, hendrerit nec diam sit amet, cursus lobortis neque. Nam eu lobortis ex. In sollicitudin pulvinar nunc sodales pulvinar. Sed aliquam urna velit, in bibendum risus laoreet ut. Nunc massa quam, ultrices in hendrerit sed, varius ac nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce vel ipsum nec elit sodales lacinia at non odio. Suspendisse posuere commodo neque. Proin accumsan augue et fermentum tristique. Ut at facilisis libero, at hendrerit enim. Phasellus pharetra varius molestie. Nam dignissim placerat posuere. 
    </p>
  </div>
</div>

CSS

.wrapper {
  display: flex;
}

.coluna {
  margin: auto;
  margin-top: 1em;
  padding: 1em;
  width: 39%;
  background-color: lightblue;
  border: 5px solid black;
}