Aligning icon and text horizontally with html and css

Question

I am trying to align the icons and text within the boxes here:

I can't seem to get the "Store Locator" and icon to align horizontally.

Can anyone please help me achieve this?

My html:

<div id="container">
    <div id="phone" class="block">Phone</div>
    <div id="chat" class="block">Live Chat</div>
    <div id="email" class="block">Email</div>
    <div id="store-locator" class="block">
       <span class="store"></span> Store Locator <--- problem line
    </div>
</div>

Answer 1

Try to use display:inline-flex here

#container {
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
}

.block {
  width: 300px;
  height: 120px;
  margin: 10px;
  display: inline-flex;
  background: #3f3f3f;
  border-radius: 5px;
  font-size: 22px;
  align-items: center;
  justify-content: center;
}

#phone {
  color: yellow;
}

#chat {
  color: green;
}

#email {
  color: white;
}

#store-locator {
  color: grey;
}

.store {
  background: url(http://s1.archerssleepcentre.co.uk/i/sprite-2015.svg) no-repeat center left;
  background-position: -432px 2px;
  position: relative;
  right: 10px;
  background-size: 1800% auto;
  height: 32px;
  width: 32px;
  display: inline-block;
}

<div id="container">
  <div id="phone" class="block">Phone</div>
  <div id="chat" class="block">Live Chat</div>
  <div id="email" class="block">Email</div>
  <div id="store-locator" class="block">
    <span class="store"></span> Store Locator
  </div>
</div>