space between email icon amd email text in css .how do i move email id text to right side?

Question

i need to move my email id text to right eqaul to icon of mailid like i have done to github and linkedin how to move text of email that i have given in contact info to right side with some gap between mail icon and mail id text like remaining github , linked in text alignment .

.contactInfo {
  padding-top: 30px;
  padding-left: 30px;
  padding-bottom: 20px;
  font-size: 16px;
  border-bottom: 3px solid rgba(251, 249, 249, 0.943);
}

.title {
  color: rgb(78, 154, 116);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
}

.contactInfo ul {
  position: relative;
  padding-top: 15px;
}

.contactInfo ul li {
  position: relative;
  list-style: none;
  cursor: pointer;
  margin: 10px 0;
}

.contactInfo ul li .icon {
  width: 30px;
  font-size: 30px;
  color: rgb(84, 152, 125);
  padding-left: 25px;
}

.contactInfo ul li span {
  color: #dbd8d8;
  font-size: 20px;
  padding-left: 50px;
}

.contactInfo ul li p {
  padding:0px  50px;
  font-size: 20px;
}

.contactInfo ul li text {
  padding-left: 80px;
  position: absolute;
}

.contactInfo ul li a {
  color: rgb(243, 239, 239);
  font-size: 20px;
  padding-left: 30px;
}

i need to move my email id text to right eqaul to icon of mailid like i have done to github and linkedin

Answer 1

For this I Guess Absolute wont work as it's worst practice of code. You can rather use flexbox.

Regarding Your example you can try this. I am assuming you have icon class for left image and text class for right text

.contactInfo ul li
{
    display:flex;
    column-gap:20px;
}
.contactInfo ul li icon
{
      width: 30px;
  font-size: 30px;
  color: rgb(84, 152, 125);
}
.contactInfo ul li text
{
    position:relative;
}

Hope It Works :)