label not inline bootstrap 4 - html

Question

I'm trying to show a bootstrap 4 label for a dropdown href alongside some text, here's the current HTML that I've put together:
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://example.org/img/user/user-13.jpg" alt="">
<span class="d-none d-md-inline">Adam Schwartz</span>
<span class="label bg-blue">Free</span>
<b class="caret"></b>
</a>
I also have the following CSS that's being applied:
.header .navbar-nav>li .dropdown-toggle .label, .header .navbar-nav>li>a .label {
position: absolute;
top: 8px;
right: 5px;
display: block;
background: #00acac;
line-height: 12px;
font-weight: 600;
color: #fff;
padding: .3em .6em;
border-radius: 20px;
}
But the issue I'm having is that my label is not showing inline to the right of the name in-between the caret as you can see below:

Answer 1

Remove position: absolute; if you want it to flow normally.
When you include the style rules below, you are telling the browser to take the .label out of the flow and position it 8px from the top and 5px from the right of the closest parent component in the DOM with that has a position set such as relative or absolute.
position: absolute;
top: 8px;
right: 5px;

Answer 2

Use Bootstrap Columns
img {
width: 70px;
height: 70px;
border-radius: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-12 mt-3">
<a href="#" class="dropdown-toggle row d-flex align-items-center align-self-center" data-toggle="dropdown">
<div class="col-1 div-container px-0 mr-4">
<img src="http://tineye.com/images/widgets/mona.jpg" class="" alt="" />
</div>
<div class="col-5 col-sm-3 col-md-2 ml-3 pl-2 pr-0 ml-md-0 pl-md-0 text-left">Adam Schwartz</div>
<div class="px-2 pl-lg-0 pr-lg-2">Free</div>
</a>
</div>
</div>
Hope it would help you.

Answer 3

It worked for me. Please see the live example below.
.dropdown-toggle,
.dropdown-menu {
width: 300px;
}
.btn-group img {
margin-right: 10px;
}
img {
width: 70px;
height: 70px;
border-radius: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<img src="http://lorempixel.com/75/50/abstract/">
Adam Schwartz
<span class="badge badge-primary">Free</span>
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<!-- Add the .dropdown-menu class to a <div> element to actually build the dropdown menu. -->
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
</div>
</div>