Как расположить мои выпадающие элементы в правильном месте?

Question

Когда я нажимаю на мои элементы div, я бы хотел, чтобы все они были расположены в одном и том же месте, справа и ниже содержимого div, однако они выпадают в том же месте, что и элементы div, на которые я нажимал как если они все в маленькой коробке внутри друг друга, если это имеет смысл. Я не совсем уверен, как заставить их всех переместиться вправо и остаться там.

https://jsfiddle.net/frmLuvzn/2/

<div class="col-md-4">
 <div class="card mb-4 shadow-sm">
<div class="content">
  <div class="description">
    The First Album[1989]
  </div>
</div>
<div class="about-section">
  <p class="album">The First Album[1989]</p>
  <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
  <div id="albumlist">
    <p>Tracklist </p>
    <ol class="albumlist">
      <li>Yes</li>
      <li>No</li>
      <li>Idk</li>
      <li>Can you repeat the question?</li>
     </ol>
   </div>
 </div>
 </div>
</div>
<div class="col-md-4">
 <div class="card mb-4 shadow-sm">
   <!-- <img class="card-img-top" src="images/album1.jpg"> -->
</div>
 <div class="content">
   <div class="description">
  The Second Album[1990]
</div>
 </div>
  <div class="about-section">
    <p class="album">The Second Album[1990]</p>
  <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
  <div id="albumlist">
    <p>Tracklist </p>
    <ol class="albumlist">
      <li>Yes</li>
      <li>No</li>
      <li>Idk</li>
      <li>Can you repeat the question?</li>
    </ol>
  </div>
  </div>

  </div>


 <div class="col-md-4">
 <div class="card mb-5 mb-4 shadow-sm">
  </div>
    <div class="content">
<div class="description">The Third Album[1990]</div>
 </div>
    <div class="about-section">

  <p class="album">The Third Album[1990]</p>
  <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
  <div id="albumlist">
    <p>Tracklist </p>
    <ol class="albumlist">
      <li>Yes</li>
      <li>No</li>
      <li>Idk</li>
      <li>Can you repeat the question?</li>
    </ol>
  </div>
</div>

$(function() {
  $('.description').click(function() {
    $(this).closest('.content').siblings('.about-section').toggle(1000);
  })
})

Answer 1

Вы лучше подходите для этого, используя flexbox.Вот пример:

$(function() {
  $('.description').click(function() {
    $(this).closest('.content').siblings('.about-section').toggle(1000);
  })
})

.about-section{
  display:none;
 }

.wrapper {
  display: flex;
}

.wrapper > div {
  flex: 0 0 33.33%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
<div class="col-md-4">
  <div class="card mb-4 shadow-sm">
    <!-- <img class="card-img-top" src="images/album2.jpeg"> -->
    <div class="content">
      <div class="description">
        The First Album[1989]
      </div>
    </div>
    <div class="about-section">
      <!-- <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p> -->
      <p class="album">The First Album[1989]</p>
      <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
      <div id="albumlist">
        <p>Tracklist </p>
        <ol class="albumlist">
          <li>Yes</li>
          <li>No</li>
          <li>Idk</li>
          <li>Can you repeat the question?</li>
        </ol>
      </div>
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="card mb-4 shadow-sm">
    <!-- <img class="card-img-top" src="images/album1.jpg"> -->
  </div>
  <div class="content">
    <div class="description">
      The Second Album[1990]
    </div>
  </div>
  <div class="about-section">
      <!-- <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p> -->
      <p class="album">The Second Album[1990]</p>
      <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
      <div id="albumlist">
        <p>Tracklist </p>
        <ol class="albumlist">
          <li>Yes</li>
          <li>No</li>
          <li>Idk</li>
          <li>Can you repeat the question?</li>
        </ol>
      </div>
    </div>

</div>


<div class="col-md-4">
  <div class="card mb-5 mb-4 shadow-sm">
    <!-- <img class="card-img-top" src="images/town.jpg"> -->
  </div>
  <div class="content">
    <div class="description">The Third Album[1990]</div>
  </div>
      <div class="about-section">
      <!-- <p id="p1"><img class="float-left" src="images/album2.jpeg" style="width: 500px; height:500px"></p> -->
      <p class="album">The Third Album[1990]</p>
      <p>bands’ classic first record, produced by Mellisa Madrid with Floor, Jake Baker, Keifer Leblanch and Adrian Sherwood.</p>
      <div id="albumlist">
        <p>Tracklist </p>
        <ol class="albumlist">
          <li>Yes</li>
          <li>No</li>
          <li>Idk</li>
          <li>Can you repeat the question?</li>
        </ol>
      </div>
    </div>
</div>
</div>