How can I align div in vertically stacked order in two columns?

Question

I have to make a testimonial section where I want to show divs stacked vertically in two coloumns. Please chedck the code below. I get the results quite close but since divs are assigned float property they don't tolerate the next div just after it and are printed with unwanted space.

Please check the URL given. https://codepen.io/parvezdgn/pen/oNNXevL

Below is the markup and CSS, I am using:

body {
  font: normal 12px 'arial'
}

.container {
  width: 70%;
  margin: 0 auto;
}

.testimony-item {
  width: 50%;
  float: left;
}

.testimony {
  margin: 0 20px 25px;
  border-bottom: 2px solid #ff2b58;
  padding-bottom: 20px;
}

.testimony strong {
  display: block;
}

.stu-details {
  padding: 15px;
  background: #ddd;
  position: relative;
  margin-top: 20px;
}

.stu-details i {
  position: absolute;
  top: -45px;
  right: 15px;
}

<div class="container">
  <div class="testimony-item">
    <div class="testimony">
      <p>text</p>
      <div class="stu-details">
        <strong>text</strong>
        <small>text</small>
      </div>
    </div>
  </div>
  <div class="testimony-item">
    <div class="testimony">
      <p>text</p>
      <div class="stu-details">
        <strong>text</strong>
        <small>text</small>
      </div>
    </div>
  </div>
  <div class="testimony-item">
    <div class="testimony">
      <p>text</p>
      <div class="stu-details">
        <strong>text</strong>
        <small>text</small>
      </div>
    </div>
  </div>
</div>

What changes do I need to do to fix it?

Thanks, P

Answer 1

If I understood true, maybe like this ??

Using FlexBox .

    body{font:normal 12px 'arial'}
.container{width:70%; margin: 0 auto;display: flex; flex-direction:row; flex-wrap: wrap; align-items: flex-end;}
.testimony-item{flex-basis:50%; box-sizing: border-box;}
.testimony{margin:0 20px 25px; border-bottom:2px solid #ff2b58; padding-bottom:20px;}
.testimony strong{display: block;}
.stu-details{padding:15px; background: #ddd; position:relative; margin-top: 20px;}
.stu-details i{position:absolute; top:-45px; right:15px;}

    

<div class="container">
    <div class="testimony-item">
        <div class="testimony">
      <p>text</p>
      <div class="stu-details">
        <strong>text</strong>
        <small>text</small>
      </div>
    </div>
    </div>
    <div class="testimony-item">
      <div class="testimony">
      <p>text</p>
      <div class="stu-details">
        <strong>text</strong>
        <small>text</small>
      </div>
    </div>
    </div>
    <div class="testimony-item">
      <div class="testimony">
      <p>text</p>
      <div class="stu-details">
        <strong>text</strong>
        <small>text</small>
      </div>
    </div>
    </div>
</div>