Transition The Size of a Container When jQuery Adds Children

I'm looking for a way to animate the increase of an element's (border) size when jQuery either adds a child or shows one that was hidden, either or. This JSFiddle likely explains this better. Instead of the divider instantly transforming to the new size when the label is clicked displaying the second label, is there a way to transform it slowly? I've tried every combination of CSS and JS I could think of and find on Stack to no avail. Help appreciated!

function load() {
  $("#example").hide();
  $("label").click(function() {
    $("#example").fadeIn();
  })
}

div {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid black;
  font-size: 50px;
}

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

<body onload=load()>
  <div>
    <label>Shown</label>
    <label id=example>Addition</label>
  </div>
</body>

Solution

You could use .slideToggle() - this will slide the bottom border down as the parent div increases in size.

$("#example").slideToggle();

This will also bring the bottom border up in a smooth transition when hiding.

function load() {
        $("#example").hide();
    $("label").click(function() {
            $("#example").slideToggle();
    })
}

div {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid black;
    font-size: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onload=load()>
  <div>
      <label>Shown</label>
      <label id=example>Addition</label>
  </div>
</body>