Trying to align text and an icon html/css - html

Question

I am trying to align an icon with some text like this:
however it comes out like this:
.percent {
float: right;
display: inline-block;
position: relative;
}
.card-icon {
float: left;
}
<div class="col-md-4">
<div class="card">
<div class="card-header" id="blue">
<p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
</div>
<p class="percent"> <img class="card-icon" src="app/assets/images/self.png" alt="Smiley face"> 1% </p>
EDIT ****
With the last answer provided it shows up like this:

Answer 1

.card-icon {float: left;margin-right:10px; }
<style type="text/css">
</style>
<div class="col-md-4">
<div class="card">
<div class="card-header" id="blue">
<p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
</div>
<div class = "percent">
<img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
<div class="card-txt"> 1% </div>
</div>
</div>
</div>

Answer 2

Try to use inline-block instead of floats:
.card-icon {
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 1;
}
.card-icon:after {
content: "=";
position: absolute;
right: -16px;
top: 50%;
transform: translateY(-50%);
}
.percent .card-txt:nth-of-type(1) {
text-align: center;
}
.card-txt {
display: inline-block;
vertical-align: middle;
text-align: center;
margin-left: 24px;
}
.block {
display: block;
}
<div class="col-md-4">
<div class="card">
<div class="card-header" id="blue">
<p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
</div>
<div class="percent">
<img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
<div class="card-txt">
<span class="block">1%</span>
<span class="block">service tax + VAT</span>
</div>
</div>
</div>
</div>

Answer 3

Sometimes the best solution is an old solution. Using HTML tables allows you to control vertical height with a high level of browser support, and backwards compatibility. Using this approach also make the element responsive. Other solutions that adopt the relative/absolute position method can suffer when resizing browser window size.
table {
margin: 0 auto;
border: 1px solid blue;
}
table tr td {
padding: 10px;
width: 100px;
text-align: center;
vertical-align: middle;
position: relative;
}
table tr .number-cell {
padding-top:10px;
width: 80px;
}
table tr .number-cell .value {
margin-top: 4px;
font-size: 42px;
}
table tr .number-cell .sub-heading {
background: grey
}
table tr .equal-cell {
width: 0px;
}
table tr td img {
width: 100%;
}
<div>
<h1>MY WEBSITE</h1>
<table>
<tr>
<td class="image-cell">
<img src="https://www.fillmurray.com/100/100"/>
</td>
<td class="equal-cell">
<span class="equal">=</span>
</td>
<td class="number-cell">
<div class="value">1%</div>
<div class="sub-heading">service fee</div>
</td>
</tr>
</table>
</div>

Answer 4

.card-icon {float: left;position:relative;z-index:1; }
.card-icon:after {content:"=";position:relative; left:25px;}
.percent .card-txt:nth-of-type(1) {text-align:center;position:relative; left:-55px;}
.card-txt {text-align:center; width:400px;background:#ddd;}
<div class="col-md-4">
<div class="card">
<div class="card-header" id="blue">
<p class="text-center"> Self Managed <img src="app/assets/images/star.png" alt=""> </p>
</div>
<div class = "percent">
<img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
<div class="card-txt"> 1% </div>
<div class="card-txt"> service tax + VAT </div>
</div>
</div>
</div>

Answer 5

If you want more controle you can use flex styling. An example:
.card {
position: relative;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
width: 500px;
}
.card-header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px;
background-color: blue;
color: white;
font-size: 24px;
}
.card-content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: gray;
}
.card-header > img {
position: absolute;
right: 0;
width: 50px;
height: 50px;
}
<div class="card">
<div class="card-header">
<span>Self Managed</span>
<img src="app/assets/images/star.png" alt="">
</div>
<div class="card-content">
<img class="card-icon" src="app/assets/images/self.png" alt="Smiley face">
<span>1%</span>
</div>
</div>