CSS How to control column height with responsive design

[gomarybetsy]

Hey, y'all. I'm trying to create columns with a minimum height that matches my tallest column — or to force the columns to stack vertically one on top of the other when the screen has a smaller width. When the screen is around 675 pixels, the columns stack in a weird way that I can't figure out how to avoid. I realize this is a very ambitious goal for my coding expertise, so if you can offer a solution, I'd really appreciate it!

<!-- COLUMN STYLING -->

<style>

 .column {
   margin-right: 50px;
   margin-bottom:0px;
   padding-right: 45px;
   float: left;
 }

 .row {
   display: table;
   margin-left: 0px;
   flex-wrap: wrap;
   flex-direction: row;
 }

 @media screen and (max-width: 300px) {
   .column {
   width: 100%;
   display:block;
   }
}

</style>



<!-- BOOKMARKS -->

<div class="row">

  <div class="column" >

    <button class="grey-label-subhead">Composition</button><br>
    <p class="bookmarks">
      00:00 → Flip<br>
      00:00 → Crop<br>
      00:00 → Auto reframe<br>
      00:00 → Ultra key<br>
    </p><br>

  </div>

  <div class="column">

    <button class="grey-label-subhead">Timing & stability</button><br>
    <p class="bookmarks">
      00:00 → Speed<br>
      00:00 → Frame hold<br>
      00:00 → Warp stabilizer<br>
    </p><br>

  </div>

  <div class="column">

    <button class="grey-label-subhead">Image quality</button><br>
    <p class="bookmarks">
    00:00 → Gaussian blur<br>
    00:00 → Unsharp mask<br>
    00:00 → Noise<br>
    00:00 → Neat Video<br>
    </p><br>

  </div>

  <div class="column">

    <button class="grey-label-subhead">Graphics</button><br>
    <p class="bookmarks">
    00:00 → Color replace<br>
    00:00 → Drop shadow<br>
    00:00 → Faux stroke<br>
    00:00 → Circle<br>
    </p><br>

  </div>

  <div class="column">

    <button class="grey-label-subhead">Recap</button>
    <p class="bookmarks">
    00:00 → PPP tasks
    </p>

  </div>

</div>



<!-- BUTTON STYLING -->

<style>

    .grey-label-subhead {
    background-color: #ebebeb;
    color: #000000;
    padding: 2px 6px;
    line-height: 1;
    border-radius: 2px;
    border: 2px solid #ebebeb;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    margin-top: 0px;
    pointer-events: none;
    word-spacing: 2px;
    text-align: left;
    vertical-align: middle;
  }
 
</style>

 

[BGB]

Is this what you want -

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Responsive Column</title>
    
    <!-- COLUMN STYLING -->
    <style>
         .column {
               margin-right: 50px;
               margin-bottom:0px;
               padding-right: 45px;
               float: left;
         }

         @media screen and (max-width: 675px) {
               .column {
                   width: 100%;
                   display:block;
               }
        }
        
        <!-- BUTTON STYLING -->
        .grey-label-subhead {
            background-color: #ebebeb;
                color: #000000;
            padding: 2px 6px;
            line-height: 1;
            border-radius: 2px;
            border: 2px solid #ebebeb;
            text-transform: uppercase;
            letter-spacing: .06em;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 4px;
            margin-top: 0px;
            pointer-events: none;
            word-spacing: 2px;
            text-align: left;
            vertical-align: middle;
          }
    </style>
</head>

<body>
    <!-- BOOKMARKS -->
    <div class="row">
        <div class="column" >
            <button class="grey-label-subhead">Composition</button><br>
            <p class="bookmarks">
                00:00 → Flip<br>
                00:00 → Crop<br>
                00:00 → Auto reframe<br>
                00:00 → Ultra key<br>
            </p><br>
        </div>

        <div class="column">
            <button class="grey-label-subhead">Timing & stability</button><br>
            <p class="bookmarks">
                00:00 → Speed<br>
                00:00 → Frame hold<br>
                00:00 → Warp stabilizer<br>
            </p><br>
        </div>

        <div class="column">
            <button class="grey-label-subhead">Image quality</button><br>
            <p class="bookmarks">
                00:00 → Gaussian blur<br>
                00:00 → Unsharp mask<br>
                00:00 → Noise<br>
                00:00 → Neat Video<br>
            </p><br>
        </div>

        <div class="column">
            <button class="grey-label-subhead">Graphics</button><br>
            <p class="bookmarks">
                00:00 → Color replace<br>
                00:00 → Drop shadow<br>
                00:00 → Faux stroke<br>
                00:00 → Circle<br>
            </p><br>
        </div>

        <div class="column">
            <button class="grey-label-subhead">Recap</button>
            <p class="bookmarks">
                00:00 → PPP tasks
            </p>
        </div>
    </div>
</body>

</html>