Jquery Slidedown() sliding down background color of other columns

Question

I have 3 bootstrap columns with all the p content hidden using CSS display: none. I have a jQuery slidedown function that's intended to just reveal one column when the user mouses over its heading. Each of the columns has the same background color set by a common class. When the p content is hidden, just a small portion of that color is shown. When I mouse over the heading to trigger the slideDown, the other columns expand as well - they are blank, the p content is still hidden as desired, but the background color expands for all the columns.

*I have tried to do this without bootstrap as well.

          <div id="firstcol" class="col">
            <h2>&#9660 asdf &#9660</h2>
            <p id="firstcolp" class="mt-3 pDL">
              asdf<br>
              asdf<br>
              asdf<br>
              asdf<br>
              asdf<br>
            </p>
            <script>
              $(document).ready(function() {
                $('#firstcol').mouseover(function(){$("#firstcolp").slideDown()});;
              });
            </script>
          </div>
          <div id="onBoard" class="col">
            <h2>&#9660 asdf &#9660</h2>
            <p id="onBoardp" class="mt-3 pDL">
              asdfasdfasdfasdf
            </p>
          </div>
          <div class="col">
            <h2>&#9660 asdf &#9660</h2>
            <p class="mt-3 pDL">
              asdfasdfasdfasdf
            </p>
          </div>
        </div>

.pDL {
    display: none;
}