slideToggle not pushing down lower div

Question

I'm having some trouble getting jQuery's slideToggle to push down the div beneath the toggled div. There are multiple existing posts on this issue, but the answer generally seems to be that the divs must be position: relative, which is already the case. I know that the culprit is the wrapper div class="content" but I can't for the life of me figure out why it's affecting the behavior and thus how to go about fixing it.

Here's a Fiddle demo.

Also, here's my code in a Stack Snippet:

$(".toggle-control").click(function() {
  $(this).find(".toggle-section").slideToggle();
});

.hidden-section {
  display: none;
}
.content {
  max-width: 945px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #f3eee2;
  box-shadow: 0 0 10px 0 #333;
  padding: 0 18px 20px 18px;
  min-height: 626px;
  -moz-box-sizing: initial;
  -webkit-box-sizing: initial;
  box-sizing: initial;
}
.content #mockup1 {
  margin: 50px 0 50px 0;
}
.content #mockup1 .package-image {
  width: 540px;
}
.content #mockup1 .package-details {
  width: 400px;
  float: right;
}
.content #mockup1 .package-details .package-details--header {
  font-size: 24px;
  padding: 5px 0 10px 25px;
}
.content #mockup1 .package-details .package-details--list {
  list-style: none;
}
.content #mockup1 .package-details .package-details--list li {
  padding: 0;
}
.content #mockup1 .package-rates {
  height: 40px;
  line-height: 40px;
  margin: 10px 0 0 0;
  padding: 0 20px 0 20px;
  background-color: #f9f5ea;
}
.content #mockup1 .package-rates .package-rates--from {
  font-size: 14px;
  padding: 0 10px 0 0;
}
.content #mockup1 .package-rates .package-rates--price {
  font-size: 24px;
  font-weight: bold;
}
.content #mockup1 .package-rates .package-rates--per {
  font-size: 14px;
  padding: 0 0 0 10px;
}
.content #mockup1 .package-rates .package-rates--dropdown {
  float: right;
}
.content #mockup1 .package-rates .package-rates--dropdown .package-rates--view {
  font-size: 18px;
  font-weight: 500;
}
.content #mockup1 .package-rates .package-rates--dropdown .caret {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px dashed;
}
.content #mockup1 .package-rates:hover {
  background-color: #e9e0c9;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="mockup" id="mockup1">

    <img class="package-image" src="http://cdn4.bluefieldsvillas.com/wp-content/uploads/2013/07/san-michele-3.jpg" />

    <div class="package-details">

      <h2 class="package-details--header">San Michele</h2>

      <ul class="package-details--list">
        <li>Available</li>
        <li>6 Rooms</li>
        <li>Private Pool</li>
        <li>Saturday - Saturday</li>
        <li>
          <br />Included Packages:
          <ul>
            <li>All Inclusive</li>
            <li>Airport Transportation</li>
            <li>Club Mobay</li>
          </ul>
        </li>
        <li>
          <br />Available Packages:
          <ul>
            <li>Wedding</li>
            <li>Vow Renewal</li>
          </ul>
        </li>
      </ul>

    </div>

    <div class="clearfix"></div>

    <div class="package-rates toggle-control">

      <span class="package-rates--from">From</span>
      <span class="package-rates--price">$234</span>
      <span class="package-rates--per">/ Person / Night</span>
      <span class="package-rates--dropdown">
                    <span class="package-rates--view">View Rates</span>
      <span class="caret"></span>
      </span>

      <div class="toggle-section hidden-section">
        <ul>
          <li>foo</li>
          <li>bar</li>
          <li>baz</li>
        </ul>
      </div>

    </div>

  </div>

  <div style="height:200px; background-color:green;"></div>
</div>

Answer 1

The problem here isn't actually the positioning of your elements, but the static dimensions you're defining for them - which conflicts with the dynamic nature of your .toggle-section element.

On .content #mockup1 .package-rates (the parent of the element you're manipulating), you've specified height: 40px - meaning that regardless of how tall its children are, it will be treated by neighbouring elements as always having a height of 40px.

If you want the element to be at least 40px, but also grow to accommodate its children should they be taller, consider using min-height instead:

.content #mockup1 .package-rates {
  min-height: 40px;
  line-height: 40px;
  margin: 10px 0 0 0;
  padding: 0 20px 0 20px;
  background-color: #f9f5ea;
}

Here's an updated JSFiddle. Hope this helps! Let me know if you have any questions.