Get the number next to the two texts-CodePudding

how it should look like

Hi i need the footer to look like the one in the picture but the problem is i can't get the element next to the <h3>/<h2>. Sorry if the question looks redundant but i just started coding so I would appreciate a little bit of help.

<footer>
  <div>
    <h1>82</h1>
    <div>
      <h3>premium</h3>
      <h2>Template</h2>
    </div>
  </div>
  <div>
    <h1>127</h1>
    <div>
      <h3>premium</h3>
      <h2>Template</h2>
    </div>
  </div>
  <div>
    <h1>326</h1>
    <div>
      <h3>Total</h3>
      <h2>Clients</h2>
    </div>
  </div>
  <div>
    <h1>3126</h1>
    <div>
      <h3>Completed</h3>
      <h2>Projects</h2>
    </div>
  </div>
</footer>

CodePudding user response：

You can add responsiveness media query.

footer {
  background-color: #913CBE;
  height: 200px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-data-wrapper {
  width: 1024px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

.footer-data-wrapper>div {
  display: flex;
  gap: 1rem;
  max-height: 3rem;
  align-items: center;
}

h1,
h3,
h2 {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 3rem;
}

<footer>
  <div class="footer-data-wrapper">
    <div>
      <h1>82</h1>
      <div>
        <h3>premium</h3>
        <h2>Template</h2>
      </div>
    </div>
    <div>
      <h1>127</h1>
      <div>
        <h3>premium</h3>
        <h2>Template</h2>
      </div>
    </div>
    <div>
      <h1>326</h1>
      <div>
        <h3>Total</h3>
        <h2>Clients</h2>
      </div>
    </div>
    <div>
      <h1>3126</h1>
      <div>
        <h3>Completed</h3>
        <h2>Projects</h2>
      </div>
    </div>
  </div>
</footer>