试图用jquery平滑地移动div

so i have this foreach loop that brings in 4 divs with an external image (replaced by "dummy" content in the snippet to get a working example), when i click on the image the "hidden" content should appear. the problem that i cant figure out is how to smoothly transition the divs to the side. for example of if i click on the top left corner the bottom left just jumps to the right bottom side, if i toggle it back everything jumps back instead of smoothly transitioning.

im basically looking for some help on the jquery side to make the transitions look smooth instead of jumping up down and sideways.

$(".icon").click(function() {
  $(this).attr('id', 'full_size');
  $article = $(this);
  $content = $article.next();
  $content.slideToggle(500, function() {
    $(this).animate({
      height: '110px',
    });
  });
});

article {
  text-align: center;
  float: left;
  margin: 0 auto;
  width: 50%;
  margin-bottom: 10px;
}

article .icon {
  width: 110px;
  height: 110px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px;
  border-radius: 10px;
}

.content {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0 20px 0 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <article class="article">
    <h3>test</h3>
    <img src="..." alt="icon" class="icon">
    <div class="content">
      <p> This doesnt serve any purpose to me except for mock up purposes. This doesnt serve any purpose to me except for mock up purposes. This doesnt serve any purpose to me except for mock up purposes.</p>
    </div>
  </article>
  <article class="article">
    <h3>test</h3>
    <img src="..." alt="icon" class="icon">
    <div class="content">
      <p> This doesnt serve any purpose to me except for mock up purposes. This doesnt serve any purpose to me except for mock up purposes. This doesnt serve any purpose to me except for mock up purposes.</p>
    </div>
  </article>
  <article class="article">
    <h3>test</h3>
    <img src="..." alt="icon" class="icon">
    <div class="content">
      <p> This doesnt serve any purpose to me except for mock up purposes. This doesnt serve any purpose to me except for mock up purposes. This doesnt serve any purpose to me except for mock up purposes.</p>
    </div>
  </article>
  <article class="article">
    <h3>test</h3>
    <img src="..." alt="icon" class="icon">
    <div class="content">
      <p> This doesnt serve any purpose to me except for mock up purposes. This doesnt serve any purpose to me except for mock up purposes. This doesnt serve any purpose to me except for mock up purposes.</p>
    </div>
  </article>
</div>

</div>

This is one way to do it. I maked what I've added and removed.

When you display a text, there has to be a place for it to be displayed on. This solution just expands the row. There is another solution (which i'd prefer) is to expand a div underneath the picture which just overlaps the row. But thats up to you :)

$(".icon").click(function() {
  $(this).attr('id', 'full_size');
  $article = $(this);
  $content = $article.next();
  $content.slideToggle(500, function() {
    $(this).animate({
      height: '110px',
    });
  });

});

.container {
  display: flex;
  flex-wrap: wrap;
}

article {
  flex-shrink: 0; /* added */
  text-align: center; /* added */
  /* margin: 0 auto; */
  width: 49%;
  margin-bottom: 10px;
  border: 1px solid red;
}

article .icon {
  width: 110px;
  height: 110px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* margin-bottom: 5px; */
  padding-bottom: 5px;
  /* added */
  border-radius: 10px;
}

.content {
  background-color: #FFF; /* added */
  display: none;
  border: 1px dashed black;
  width: 50%;
  /* align-items: center; */
  /* justify-content: center; */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <article class="article">
    <h3>test</h3>
    <img src="https://via.placeholder.com/50x50" alt="" class="icon">
    <div class="content">
      <p>Some Text</p>
    </div>
  </article>

  <article class="article">
    <h3>test</h3>
    <img src="https://via.placeholder.com/50x50" alt="" class="icon">
    <div class="content">
      <p>Some Text</p>
    </div>
  </article>
  
  <article class="article">
    <h3>test</h3>
    <img src="https://via.placeholder.com/50x50" alt="" class="icon">
    <div class="content">
      <p>Some Text</p>
    </div>
  </article>
</div>

</div>