Aligning icons and text in a list

[rimsky1]

Hey folks,

Struggling to figure this out, tried doing the below in flexbox to no success and now trying with grid. I am trying to have the icons equally lined up and the text aligned to the right without the text pushing the icons out of line.

    <script src="https://kit.fontawesome.com/23a8029d38.js" crossorigin="anonymous"></script>

    <div class="hero">
      <div class="hero container">
        <div class="section">
          <h1 class="hero-title">Just some random filler text here</h1>
          <ul>
            <li><i class="fa-solid fa-pen-ruler"></i> Planning & Design</li>
            <li><i class="fa-solid fa-wind"></i> Commercial Ventilation</li>
            <li><i class="fa-solid fa-toolbox"></i> Expert Installation</li>
            <li><i class="fa-solid fa-building-circle-check"></i> Council Approval Support</li>
          </ul>
          Request A Quote Btn Here

        </div>

        <div class="hero section">
          Image Slider Here</div>

      </div>
    </div>

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

a {
  text-decoration: none;
}

li {
  list-style-type: none;
}

body {
  background: #999;
  font-family: 'Quicksand', sans-serif;
}

.container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0;
}

.hero {
  background-color: #ecf0f1;
  min-height: 25rem;
  text-align: center;
}

.hero .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  border: 2px solid red;


}

.hero-title {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.8rem;
}

.hero li {
  font-size: 1.2rem;

}

.hero i {
  font-size: 3rem;
  vertical-align: middle;

}

.hero .section {
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 1rem;
}

.icons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

}

Edit fiddle - JSFiddle - Code Playground

[PaulOB]

Why use the new stuff when the old stuff does it better

.hero.container ul {
  display: table;
  width: 100%;
  text-align: right;
}
.hero.container li {
  display: table-row;
}
.hero.container i {
  display: table-cell;
  padding: 0 0 1rem;
  text-align:left;
}

If you want the text at the side of the icon then just change the tex alignment to left. The benefit of the table/ table cell approach is that no magic numbers are needed to line things up. It’s automatic.

To do what you wanted using grid you’d need to use a nested grid approach (poorly supported still) with the mark up you have and also add another element around the text. Grid is best when theres a parent and direct children but the ul and li approach makes that awkward unless you use the nested grid approach as mentioned.

As an aside it’s confusing where you have used the .hero class on the parent and the child?

[SamA74]

I tried two versions.
This uses absolute positioning for the icon, then some margins to nudge things into place.

This uses a float on the icons.