JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="phone">
          <div class="nightmare">
            <a href="mailto:[email protected]"><img src="https://images.app.goo.gl/rP8taF76FGY6B1wR6" width="18" height="18"></a>
          </div>
          <div>
            <a href="mailto:[email protected]">[email protected]</a>
          </div>

          <div class="nightmare">
            <a href="tel:+1-303-499-7111"><img src="https://images.app.goo.gl/rP8taF76FGY6B1wR6" width="18" height="18"></a>
          </div>
          <div>
            <a href="tel:+1-303-499-7111">(303) 499-7111</a>
          </div>
        </div>

CSS

.phone {
    flex-wrap: wrap;
    display: flex; 
    color: #ffffff;
    background-color: #004c00;
    justify-content: flex-end; 
    flex-direction: row;
    align-items: center;
    font-size: 1;   
    height:50px;
}
.nightmare a{
    display:flex;
    align-items: center;
}