I have a .section-offerings section in my html file, inside I have 2 divs that will be rows in a table of features about a product. Each row is supposed to have an icon and a description of the feature, I added two divs for icon and description. This is the idea:

enter image description here

I set the section max-width to 1000px, and then set the icon divs classes to width 20%. I expected both divs to be 200px… but only the first one is. As you can see in the image the text of both rows is not aligned, and this is because the icon div has different sizes.

Can someone explain to me why this happens? I expected 200px for both, since it is the 20% of the container.

Here is my code as reference. I am totally new on this, just learning!

HTML:

<main>
      <section class="section-offerings">
          <div class="offerings-row">
            <div class="offerings-icon"><i class="fa fa-3x fa-fire"></i></div>
            <div class="offerings-desc">
              <h2>Premium Materials</h2>
              <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
            </div>
          </div>
          <div class="offerings-row">
            <div class="offerings-icon"><i class="fa fa-3x fa-truck"></i></div>
            <div class="offerings-desc">
              <h2>Fast Shipping</h2>
              <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
            </div>
          </div>
      </section>
    </main>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100vh;
    background-color: #eee;
    font-family: 'Lato', sans-serif;
    margin-top: 75px;
}

.section-offerings {
    max-width: 1000px;
    margin: 0 auto;
}

.offerings-row {
    display: flex;
    align-items: center;
}

.offerings-icon {
    width: 20%;
    height: 125px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: darkorange;
}

I tried using vw units instead of percentage, but the outcome is the same.