Aligning Two Columns of Divs Regardless of Div Height

Question

I'm having a problem where I have a ton of divs all varying in height, and I want them to align vertically in two columns. I understand why it's breaking if the first div is longer than the second, but I can't think of a solution for it.

HTML:

 <div class="board-container">
      <div class="board-card">
            <h1>CARD #1</h1>
            <h2>ODD</h2>

        <div class="board-card-desc">
          <p> A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here.</p>
        </div>
  </div>

  <div class="board-card">
        <h1>CARD #2</h1>
        <h2>EVEN</h2>

        <div class="board-card-desc">
          <p> Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
        </div>
  </div>
  <div class="board-card">
        <h1>CARD #3</h1>
        <h2>ODD</h2>

        <div class="board-card-desc">
          <p> More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. </p>
        </div>
  </div>

  <div class="board-card">
        <h1>CARD #4</h1>
        <h2>EVEN</h2>

        <div class="board-card-desc">
          <p> And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text.And even more text. And even more text.  </p>
        </div>
  </div>

</div>

CSS:

.board-card {
  margin: 0 auto;
  border: 1px solid black;
  border-radius: 5px;
  width: 250px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  position: relative;
}

.board-card:nth-child(odd) {
  float: left;
  margin-left: 30px;
}

.board-card:nth-child(even) {
  float: right;
  margin-right: 30px;
}

.board-card h1 {
  text-align: center;
  color: #d85656;
  font-weight: 200;
  margin: 0;
  padding: 0;
  left: 15px;
}

.board-card h2 {
  text-align: center;
  color: black;
  font-weight: 400;
  margin: 0;
  padding: 0;
  right: 15px;
}

.board-card h1, .board-card h2 {
  margin-top: 4px;
  font-size: 24px;
  position: absolute;
}

.board-card-desc p {
  color: black;
  font-weight: 300;
  margin: 0;
  padding: 20px;
}

.board-card-desc {
  margin-top: 35px;
  width: 100%;
  border-top: 1px solid black;
}

.board-container {
  margin: 0 auto;
  overflow: auto;
  width: 600px;
}

Here it is in jsfiddle. As you can see, if the second card is short than the first, the third card breaks out of line. Is there a good solution to make each odd and even child align to the left and right respectively, regardless of height of the card?

Answer 1

You could get pretty far with this by replacing .board-container's css with CSS column layout:

.board-container {
  column-count: 2;
}

.board-card {
  margin: 0 auto;
  border: 1px solid black;
  border-radius: 5px;
  width: 250px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  position: relative;
}

.board-card h1 {
  text-align: center;
  color: #d85656;
  font-weight: 200;
  margin: 0;
  padding: 0;
  left: 15px;
}

.board-card h2 {
  text-align: center;
  color: black;
  font-weight: 400;
  margin: 0;
  padding: 0;
  right: 15px;
}

.board-card h1, .board-card h2 {
  margin-top: 4px;
  font-size: 24px;
  position: absolute;
}

.board-card-desc p {
  color: black;
  font-weight: 300;
  margin: 0;
  padding: 20px;
}

.board-card-desc {
  margin-top: 35px;
  width: 100%;
  border-top: 1px solid black;
}

.board-container {
  column-count: 2;
}

<div class="board-container">
  <div class="board-card">
        <h1>CARD #1</h1>
        <h2>ODD</h2>

        <div class="board-card-desc">
          <p> A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here. A ton of text here.</p>
        </div>
  </div>
  
  <div class="board-card">
        <h1>CARD #2</h1>
        <h2>EVEN</h2>

        <div class="board-card-desc">
          <p> Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
        </div>
  </div>
  <div class="board-card">
        <h1>CARD #3</h1>
        <h2>ODD</h2>

        <div class="board-card-desc">
          <p> More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. More text here. </p>
        </div>
  </div>
  
  <div class="board-card">
        <h1>CARD #4</h1>
        <h2>EVEN</h2>

        <div class="board-card-desc">
          <p> And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text. And even more text.And even more text. And even more text.  </p>
        </div>
  </div>
  
</div>

Answer 2

Have you tried using flexbox?

https://jsfiddle.net/d4mu8eg6/2/

.board-container {
  margin: 0 auto;
  overflow: auto;
  width: 600px;
  display: flex;
  flex-wrap: wrap;
}