How to make div fade out and fade in without effecting parent container height

I have a tabbed section which showcases 1 .section__content area based on what tab is clicked.

In my demo below, I have used fadeTo( "slow", 1 ) instead of fadeOut(), so that the parent div isn’t always resizing after tab change. However, if I click on tab-2 it’ll render below where tab-1 would be (because the opacity is 0, but block height is still there). But, if I do display: none, the fade effects are not fluent.

$(function() {

  $(".section__label:first").addClass("active");
  $(".section__content:first").fadeIn();

  $('.section__label').click(function() {

    var id = $(this).attr('data-item');

    $(".section__label").removeClass("active");
    $(this).addClass("active");

    $(".section__content").fadeTo( "slow", 0 );
    $(".section__content[data-item='"+id+"']").fadeTo( "slow", 1 );

  });


});

.section {
  background: lightblue;
  padding: 100px 0;
  border: 1px solid black;
}
.section__tabs {
  display: flex;
  flex-direction: column;
}
.section__label {
  cursor: pointer;
  display: inline-block;
}
.section__label.active {
  color: orange;
}
.section__content {
  display: none;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">


<div class="section">
  <div class="container">
    <div class="row justify-content-between">

      <div class="col-3">
        <div class="section__tabs">
          <span class="section__label" data-item="tab-1">Tab 1</span>
          <span class="section__label" data-item="tab-2">Tab 2</span>
          <span class="section__label" data-item="tab-3">Tab 3</span>
        </div>
      </div>

      <div class="col-7">
        <div class="section__content" data-item="tab-1">
          <p>Text for tab 1</p>
        </div>
        <div class="section__content" data-item="tab-2">
          <p>Text for tab 2</p>
        </div>
        <div class="section__content" data-item="tab-3">
          <p>Text for tab 3</p>
        </div>
      </div>

    </div>
  </div>
</div>