你怎么能让两根用 flex 制成的柱子相互对齐？

Question

我已经用 flex 制作了这两列，但由于一列字母太多而另一列没有，所以它们没有对齐。这是它的一些图片：上排比下排更靠右。特别是中间项目。编辑代码，使其看起来像 example

.simple-plans-first {
    display: flex;
    justify-content: space-around;
}

<div class='simple-plans-first'>
  <div>
    <div></div>
    <div>
      <h3>Build your SaaS<br /> from zero. </h3>
    </div>
    <div>
      <p>We handle the creation of your <br />SaaS from zero.</p>
    </div>
  </div>
  <div>
    <div></div>
    <div>
      <h3>Fixed monthly <br />rate.</h3>
    </div>
    <div>
      <p>Pay the same prices each <br />month. No messing around <br />and no extra-costs.</p>
    </div>
  </div>
  <div>
    <div></div>
    <div>
      <h3>Code built for <br />performance.</h3>
    </div>
    <div>
      <p>We create a quality and<br /> scalable code. </p>
    </div>
  </div>
</div>
<div class='simple-plans-first'>
  <div>
    <div></div>
    <div>
      <h3>Full licensing, all<br /> yours.</h3>
    </div>
    <div>
      <p>Once we finish working with you,<br /> you will have 100% rights for<br /> everything.</p>
    </div>
  </div>
  <div>
    <div></div>
    <div>
      <h3>Superb<br /> communication.</h3>
    </div>
    <div>
      <p>We will communicate the <br />progress after each week and we <br />will have boards for tasks. </p>
    </div>
  </div>
  <div>
    <div></div>
    <div>
      <h3>Cancel at any <br />time.</h3>
    </div>
    <div>
      <p>Once you don’t want to work with<br /> us (we hope not) you will be able to<br /> cancel the subscription at any time.</p>
    </div>
  </div>
</div>

Answer 1

使用这样的 display: grid; 可以更容易地完成此任务：

body {
 background-color: #111;
 color: white;
 font-family: Arial, sans-serif;
}

.simple-plans-first {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.simple-plans-first > div {
  text-align: center;
}

<div class='simple-plans-first'>
    <div>
      <h3>Build your SaaS<br /> from zero. </h3>
      <p>We handle the creation of your <br />SaaS from zero.</p>
    </div>

    <div>
      <h3>Fixed monthly <br />rate.</h3>
      <p>Pay the same prices each <br />month. No messing around <br />and no extra-costs.</p>
    </div>
    
    <div>
      <h3>Code built for <br />performance.</h3>
      <p>We create a quality and<br /> scalable code. </p>
    </div>

    <div>
      <h3>Full licensing, all<br /> yours.</h3>
      <p>Once we finish working with you,<br /> you will have 100% rights for<br /> everything.</p>
    </div>
    
    <div>
      <h3>Superb<br /> communication.</h3>
      <p>We will communicate the <br />progress after each week and we <br />will have boards for tasks. </p>
    </div>
    <div>
      <h3>Cancel at any <br />time.</h3>
      <p>Once you don’t want to work with<br /> us (we hope not) you will be able to<br /> cancel the subscription at any time.</p>
   </div>
</div>

Answer 2

你可以这样处理。去掉所有不需要的div让它们自己自动流动，均匀给它们一个space

.simple-plans-first {
   display: grid;
   grid-template-columns: auto auto auto;
   justify-content: space-evenly;
   grid-gap: 20px;
   width: 100%;
   text-align: center;
   background-color: black;
   color: white;
}

<div class='simple-plans-first'>

    <div>
      <h3>Build your SaaS<br /> from zero. </h3>
      <p>We handle the creation of your SaaS from zero.</p>
    </div> 
      
    <div>
      <h3>Fixed monthly <br />rate.</h3>
      <p>Pay the same prices each month. No messing around and no extra-costs.</p>
    </div>      

    <div>
      <h3>Code built for <br />performance.</h3>
      <p>We create a quality and scalable code. </p> 
    </div>

    <div>
      <h3>Full licensing, all<br /> yours.</h3>
      <p>Once we finish working with you, you will have 100% rights for everything.</p>        
    </div>


    <div>
      <h3>Superb<br /> communication.</h3>
       <p>We will communicate the progress after each week and we will have boards for tasks. </p>
    </div>

    <div>
      <h3>Cancel at any <br />time.</h3>
      <p>Once you don’t want to work with us (we hope not) you will be able to cancel the subscription at any time.</p>
    </div>
 </div>

你怎么能让两根用 flex 制成的柱子相互对齐？

How can you make two columns made with flex to align each other?

html

css