Dont get the text too look the right way - html

Question

What I want:
1:
What I want is that the echo '<span class="badge bg-red">Denied</span>'; is directly under the echo '<b> '</b>'; and that the img is the full height. And if I use the <br> it puts the text under the img and not next to it. Because I need the image to be always on the left with the text next to it.
2: The second thing that I want is that there is a small line under the
echo '<b> '</b>';
echo '<a> - ' . $topic['voornaam'] . '</a>';
How it looks like now.
The code:
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title"><b>Topics</b></h3>
</div><!-- /.box-header -->
<div class="box-body">
<?php
$toppic = $app->get_topics();
foreach($toppic as $topic){
echo '<div id="topic">';
if(file_exists('assets/images/profielfotos/'.$topic['klant_id'])) {
echo '<img style="height:100%;"class="img-circle" src="/assets/images/profielfotos/'.$topic['klant_id']src="###.'/'.$topic['foto'].'"###'" />';
} else {
echo '<i class="fa fa-fw fa-user img-circle"></i>';
}
echo '<b> '.$topic['topicnaam'].'<$####'</b>';
echo '<a> - ' . $topic['voornaam'] ####. " " . $topic['achternaam']#### . '</a>';
echo '<span style="float:right;"class="fa-stack"><span class="fa fa-comment-o fa-stack-2x"></span><strong class="fa-stack-1x" style="font-size:10px;">999</strong></span>';
echo '<span class="badge bg-red">Denied</span>';
echo '</div>';
}
?>
</div><!-- /.box-body -->
<div class="box-footer text-center">
</div><!-- /.box-footer -->
</div><!-- /.box -->
The custom css:
#topic a {
color: black;
margin-left: 1%;
}
#topic {
padding: 10px;
}
#topic i{
font-size: 2.3em;
width: 33px;
}

Answer 1

One of the alternatives is by using the list tag
Here is an example for your convenience:
HTML:
<ul>
<li>
<img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" class="pic">
</li>
<li>
<h2>Title</h2>
<p>description declined</p>
</li>
</ul>
CSS:
.pic{
max-width:150px;
max-height:150px;
margin-right:50px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
ul {
list-style-type: none;
}
.pic{
max-width:150px;
max-height:150px;
margin-right:50px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
ul {
list-style-type: none;
}
<ul>
<li>
<img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" class="pic">
</li>
<li>
<h2>Title</h2>
<p>description declined</p>
</li>
</ul>
Adjust it accordingly with your code. Have fun :)

Answer 2

First of all, there's some sintax errors at the php code in the <div class="box-body">, check it out because the compiler can throw an error.
At the css part, i would use position: relative to the DOM elements inside the <div class="topic"> and later adjust it with top, bottom, left, right (Check this out for more info about the positioning properties in css).
Also, i would set the image full height with height: 100%, but, just as a recommendation, try using height: auto, with this property the img height adjusts to the DOM and it MAYBE get a height you like(Here's some info about height property).
Finally, you could get the small line with the <u> html tag or with the css text-decoration: underline. You can see both here.
Hope this answer helps you, if it does, please vote it up so that people can get helped if needed :)