Html 调整窗口大小时，按钮因其上方的文字而未在同一高度对齐

多亏了几天的互联网，我已经“提高”了我的编码技能。但是有时候，我还是会遇到一些问题。基本上，我得到了文本，在文本下我得到了按钮。当然，有些段落比其他段落长。因此，当我调整窗口大小时，一些按钮将移动到比其他按钮低的位置。当它移动得太低，坏事就会发生。请查看我的代码，以便更好地理解：

HTML:

---

（我知道这里和那里有一些错误，我是新手，抱歉。）但我确实理解为什么会发生这种情况，因为按钮和段落位于同一分区。我尝试设置按钮的最小高度。它能用，但一点也不好看。我想要的是将3个按钮（或2个按钮，取决于窗口大小）设置为与当时段落最长的按钮相同的高度。有人愿意跟我讲点道理，帮我解决这个问题吗？提前谢谢。

好的，我想我有些东西可以用。我鼓励您了解Flexbox。这是一个非常强大的工具！以下是我对您的CSS所做的调整：

.planets {
    font-size: 2em;
    padding: 0px 0 0 0;
    width: 100%;
    text-align: center;
    color: black;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.planets .col-lg-4 a{
    height: 48px;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    display: block;
}
.planets .col-lg-4{
  padding-bottom: 48px;
}

---

我只是将flexbox属性添加到已经存在的

.planet

样式中。此外，我还为

添加了样式。看看这个，哇，我不知道flexbox会这么有用。我一定会花时间去了解他们。谢谢你的帮助@迈克尔：当然。如果你遇到任何麻烦，请告诉我。
     html {
        margin: 0;
    }

    body {
        background: #DCDCDC;
        width: 100%;
        margin: 0;
    }

    .carousel-control.left, .carousel-control.right {
        background-image: none;
        width: 10%;
    }

    hr.style-one {
        border: 0;
        height: 1px;
        background: #333;
        background-image: linear-gradient(to right, #ccc, #333, #ccc);
    }

    .bannertext {
         font-size: 1.3em;
         line-height: 15px;
         position: relative;
    }
        .bannertext h1 {
            font-size: 2em;
        }

    #headerbutton-language-english {
         font-weight: bold;
        -webkit-border-radius: 5px;
        color: white;
        background-color: #778899;
        width: 110px;
        text-align: center;  
        border: white 2px solid ;
        line-height: 40px;
        position: absolute;
        right: 50px;
        bottom: 0px;
    }

    #headerbutton-language-dutch {
         font-weight: bold;
        -webkit-border-radius: 5px;
        color: white;
        background-color: #778899;
        width: 110px;
        text-align: center;  
        border: white 2px solid ;
        line-height: 40px;
        position: absolute;
        right: -100px;
        bottom: 0px;

    }

    .planettext {
        text-align: center;
        font-size: 1.5em;
        color: #000;
        margin-top: 200px;
        margin-bottom: 30px;
        width: 100%;
        background-color: #DCDCDC;
        font-weight: bold;
    }

    .planets {
       font-size: 2em;
       padding: 0px 0 0 0;
       width: 100%;
       text-align: center;
       color: black;
    }
        .planets img {
            height: 300px;
            max-width: none;
            margin-bottom: 20px;
            margin-bottom: 30px;
        }

        .planets button {
            margin-bottom: 30px;
        }


    .plutotext {
        text-align: center;
        font-size: 1.5em;
        color: #000;
        margin-top: 100px;
        margin-bottom: 30px;
        width: 100%;
        font-weight: bold;
        margin: 00;
    }

    @media all and (max-width: 960px) {
        #headerbutton-language-dutch { display: none; }
        #headerbutton-language-english { display: none; }
    }

    .mobileShow { display: none;}
    .mobileHide { display: inline;}
         /* Smartphone Portrait and Landscape */
        @media only screen
            and (max-device-width : 480px){
            .mobileShow { display: inline;}
            .mobileHide { display: none;}
            .planet img{
                height: 200px;
            }
        }

.planets {
    font-size: 2em;
    padding: 0px 0 0 0;
    width: 100%;
    text-align: center;
    color: black;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.planets .col-lg-4 a{
    height: 48px;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    display: block;
}
.planets .col-lg-4{
  padding-bottom: 48px;
}