multiple lines net icon

Question

I am doing project on FreeCodeCamp and i want to put two lines next to icon, but one is under the icon, how can i solve it?

p {
  display: inline;
  vertical-align: top;
}

.icon-header {
  font-size: 50px;
  color: black;
  margin-left: 5%;
  display: inline-block;
  vertical-align: top;
}

.icon-text {
  display: inline-block;
  float: left;
  color: black;
  font-size: 14px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" >
<i class="fas fa-hand-holding-usd"><p><span class="icon-header">Low Prices</span><br><span class="icon-text">Our graphics cards are so cheap and affordable for everyone</span></p></i>

Answer 1

You can use position for icon

p {
    display: inline-block;
    vertical-align: middle;
    padding-left: 44px;
    position: relative;
}
p i{
    position: absolute;
    left: 0;
    top: 15%;
    font-size: 32px;
}
.icon-header {
  font-size: 50px;
  color: black;
  display: block;
  vertical-align: top;
}

.icon-text {
  display: block;
  float: left;
  color: black;
  font-size: 14px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" >
<p><i class="fas fa-hand-holding-usd"></i> <span class="icon-header">Low Prices</span><span class="icon-text">Our graphics cards are so cheap and affordable for everyone</span></p>