JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<div class="outer-one">
  <div class="outer-two">
    <i class="far fa-user user-icon"></i>
    <span class="phone-text" style="font-family: Raleway, sans-serif; font-size: 
                                    1.2rem;">(314) 567-7000  | </span>
    <i class="far fa-envelope contact-icon"></i>
    <a class="contact-text" href="http://cfk2021.flywheelsites.com/">CONTACT</a>
  </div>
</div>

CSS

.outer-one {
      display: flex;
      flex-direction: row;
    }

    .outer-two {
      display: flex;
    }

    .outer-three {
      display: flex;
    }

    .phone-text, .contact-text {
      color: #213b56;
      text-decoration: none;
      font-weight: bold;
      font-family: 'Raleway';
      margin-top: 4px;
    }

    .contact-text {
      margin-top: 7px;
    }

    .contact-text:hover {
      color: #e46e6e;
    }

    .user-icon, .contact-icon {
      padding: 7px;
    }

JavaScript

function changeIconColor (hoverState) {
    let contactText = document.getElementsByClassName('contact-text');
    let contactIcon = document.getElementsByClassName('contact-icon');  
    //if the text is hovered over, change the color of the icon to #e46e6e
    if ($('#contactText').is(":hover")) {
        contactIcon.css("color", "red");
    }; 
    if ($('#contactIcon').is(":hover")) {
        contactText.css("color", "red");
    };
}

changeIconColor();