FontAwsome and Text Alignment

So I want to make the fontawsome icon and the text align so the icon is staying on the left side and all the text is on the right. Please take a look at what I have and I what I want to do.

With mine you can see the second line goes all the way back to the left side. Where the icon is above.

Here is the code of what I have currently:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Place your kit's code here -->
    <script src="https://kit.fontawesome.com/74e8323267.js" crossorigin="anonymous"></script>

  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- Ready to use Font Awesome. Activate interlock. Dynotherms - connected. Infracells - up. Icons are go! -->

<div class="container">
  <div class="alert alert-warning">
    <i class="fas fa-exclamation fa-2x fa-fw"></i>&nbsp;<font size="4"><b>In observation of the holiday, LCS website will not have updated guidance on Friday, April 10, 2020. Guidance and updates will resume Monday, April 13, 2020.</font></b>
  </div>

</div>

</body>
</html>

Solution

If you update your bootstrap version you could use its flex properties to achieve.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Also wrapping your elements into their own div will make it easier for you to manage their spacing.

In case you don't want to update your bootstrap you can write the same with CSS.

.wrapping-div {
  display: flex;
  align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Place your kit's code here -->
    <script src="https://kit.fontawesome.com/74e8323267.js" crossorigin="anonymous"></script>

  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <!-- Ready to use Font Awesome. Activate interlock. Dynotherms - connected. Infracells - up. Icons are go! -->

  <div class="container">
    <div class="alert alert-warning d-flex align-items-center">
      <div>
        <i class="fas fa-exclamation fa-2x fa-fw"></i>
      </div>
      <div>
       <font size="4"><b>In observation of the holiday, LCS website will not have updated guidance on Friday, April 10, 2020. Guidance and updates will resume Monday, April 13, 2020.</b></font>
      </div>
    </div>
  </div>

</body>
</html>