Html 将三个div转换为显示flex

我有这个代码

Html:

<div class="index-fifth">
  <div class="index-fifth-head">
    <h2>Why Us?</h2>
    <h1>Our Advantage</h1>
  </div>
  <div class="index-fifth-wrappers">
    <div class="index-fifth-wrapper-1">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>Credible</p>
      </div>
      <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
    </div>
    <div class="index-fifth-wrapper-2">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>Credible</p>
      </div>
      <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
    </div>
    <div class="index-fifth-wrapper-3">
      <div style="display: flex; gap: 1em; padding-top: 15px;">
        <i class="fa-solid fa-hospital"></i>
        <p>Credible</p>
      </div>
      <p style="margin-top: 40px;">The medical consultants present on MedConnect are confirmed and cross-checked to be official and credible when they sign up on MedConnect. Through the relevant medical details that they <br> provide, MedConnect affirms them to be credible consultants.</p>
    </div>
  </div>
</div>

Css:以下内容:

.index-fifth-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 50px;
        gap: 1em;
        color: #704a1b;
      }

      .index-fifth-head h1 {
        color: #614124;
      }

      .index-fifth-wrappers {
        font-size: 17px;
        background-color: #ffdc84;
        padding: 20px;
        width: 450px;
        border-radius: 5px;
        color: #704a1b;
      }

现在，这些div如下所示(.index-fifth-wrappers不使用display: flex):

现在，当我使用display: flex并像这样修改代码时:

.index-fifth-wrappers {
        font-size: 17px;
        background-color: #ffdc84;
        padding: 20px;
        width: 450px;
        border-radius: 5px;
        color: #704a1b;
        display: flex;
        justify-content: space-around;
      }

这种情况会发生:

我怎么才能让它看起来像这样呢？