Aligning li items from top

Question

I'm trying to align li items from the top so that they look like this:

However, with my current code, I'm unsure why my list is coming out like so...

.customer-experience .list-items {
  padding-top: 110px;
  box-sizing: border-box;
  list-style: none;
}

.customer-experience .list-items li {
  width: 33%;
  float: left;
}

.customer-experience .list-items li h3 {
  font-size: 90px;
  color: #333333;
  font-family: "Oswald";
  font-weight: 400;
  margin-bottom: 0;
  padding-bottom: 50px;
  border: 1px solid red;
}

.customer-experience .list-items li p {
  color: #333333;
  font-weight: 400;
  font-size: 1.875rem;
}

<section class="text-block customer-experience">
  <div class="wrapper">
    <div class="content-block">
      <div class="content-block-wrapper">
        <ul class="list-items">
          <li>
            <h3>64%</h3>
            <p>Customers want personalised offers</p>
          </li>
          <li>
            <p>Up to</p>
            <h3>€20 million</h3>
            <p>Fine for GDPR non-compliance</p>
          </li>
          <li>
            <h3>52%</h3>
            <p>Customers say not enough is done to make them feel welcome</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

I've tried to add a fixed height, but 1. I don't want to add fixed heights, 2. It doesn't work anyway. The second list item also has a <p> above it, which is maybe contributing to the issue? Ideas?

the `li` elements are aligned, put the red border on the `li`. But you have margins on both the `h3` and the `p` — anderssonola, Aug 16 '18 at 09:54
this seems really tricky with this html organization. Plus, for displaying inline content like this, consider using [flex box](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) — NicossB, Aug 16 '18 at 09:58

Aligning li items from top

0 Answers0