How to properly align circle icon with text - html

Question

I'm trying to achieve something like this inside a bootstrap column (I don't care much about the styles, but the alignment):
Basically, what's I've tried so far is this:
<div class="circle">NA</div>
<div class="author">
<p>Some text</p>
<p><strong>Should appear here</strong></p>
</div>
where circle is:
.circle {
float: left;
width: 45px;
height: 45px;
border-radius: 50%;
font-size: 15px;
color: #fff;
line-height: 45px;
text-align: center;
background: #66fbd1;
}
Also I've applied a lesser line-height:
.author {
line-height: 50%;
}
I've tried floating the circle div to the left, however, I get this:
I am not really sure if:
a) Floating is the right way to go here, considering the fact the icon and the text should be "centered" along the vertical axis
b) If I did accomplish this with floating, how would I make the text more vertically aligned with the icon? Is it just a matter of adjusting the right margin-top?
Btw, I know I could solve some of these issues with Flexbox, however, I'm not allowed to use it here.

Answer 1

If you are not allowed to use flexbox, inline-block might be a solution for you. When you use float, vertical align is ignored. But it is not ignored when using display: inline-block. Try this:
.circle {
display:inline-block;
width: 45px;
height: 45px;
border-radius: 50%;
font-size: 15px;
color: #fff;
line-height: 45px;
text-align: center;
background: #66fbd1;
vertical-align:middle;
}
.author {
line-height: 40%;
display:inline-block;
vertical-align:middle;
}
<div class="circle">NA</div>
<div class="author">
<p>Some text</p>
<p><strong>Should appear here</strong></p>
</div>

Answer 2

What about display: table; ? :)
<div class="wrapper">
<div class="circle">NA</div>
<div class="author">
<p>Some text</p>
<p><strong>Should appear here</strong></p>
</div>
</div>
.wrapper{
display: table;
table-layout: fixed;
vertical-align: middle;
}
.circle,
.author{
display: table-cell;
}

Answer 3

Also if text will be large and dynamic then have different approach. Have many ways but based your markup you can apply following CSS code:
.circle {
float: left;
width: 45px;
height: 45px;
border-radius: 50%;
font-size: 15px;
color: #fff;
line-height: 45px;
text-align: center;
background: #66fbd1;
margin-right: 10px;
font-family: arial;
}
.author {
font-family: arial;
padding: 5px 0 0 0;
line-height:20px;
}
.author p {
margin: 0;
}