我有一段代码可以渲染一个应用程序

<div class="applications">
         <!-- 
        <div>
          <h3>Applications</h3>
          <% applicants.forEach(function(applicant){ %>

          <div class="application">
            <div class="user-info">
              <div class="user-avatar">
                <img src="/images/avatar2.jpg" alt="applicant avatar" />
              </div>
              <h4 class="applicant-name"><%= applicant.username%></h4>
              <p class="application-time">Applied <%= getTimePassed(applicant.dateposted)%></p>
              <div style="margin-left:auto;display:flex;gap:8px;">
                <div class="button accept">Accept</div>
                <div class="button reject">Reject</div>
                <a href="#">
                  <div class="mini-button"><img src="/images/rep.svg" alt="report" /></div>
                </a>
              </div>
            </div>
            <p class="application-text">
<              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis
              aute irure dolor in reprehenderit in voluptate velit esse cillum
              dolore eu fugiat nulla pariatur.
>            </p>
            <div class="socials">
              <a href="/profile/<%=applicant.username%>" target="_blank">
                <div class="social-icon">
                  <img src="/images/website.svg" alt="website">
                  <p>View Profile/Portfolio</p>
                </div>
              </a>
              <!---    <a href="#">
                <div class="social-icon">
                  <img src="/images/discord.svg" alt="discord">
                  <p>Discord</p>
                </div>
              </a>
              <a href="#">
                <div class="social-icon">
                  <img src="/images/github.svg" alt="github">
                  <p>Github</p>
                </div>
              </a>
            -->
            </div>
          </div>
          <% }); %>

        </div>
      </div>

但是，如果application-text值很长，它将展开框并删除响应，如下所示。x1c 0d1x
此外，如果application-text值较低，则它会缩短框，看起来像这样

我希望div保持相同的长度，并且响应速度快，看起来像这样，不管文本大小如何。

下面是应用程序部分和每个应用程序元素的当前CSS

.application {
        padding: 10px !important;
      }

      .applications {
        padding: 0px 10px !important;
      }
    .applications {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 40px;
      padding: 0 2rem;
    }

    .applications>div {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .applications>div h3 {
      text-align: center;
      font-size: 28px;
    }

    .application {
      position: relative;
      display: flex;
      flex-direction: column;
      border: 1px solid #e2e2e2;
      border-radius: 8px;
      padding: 2.4rem 3.2rem;
    }

    .user-info .application-time {
      color: #757575;
      font-size: 14px;
    }

    .user-avatar img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .application-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

如何使应用程序div保持适当的大小而不管应用程序文本的长度？