Search code examples
csshtmlalignmentmeteor-blaze

Align div to be beside <a href> tag

I have tried to get this simple thing aligned the proper way but still looking for a way out. My simple question is how to align the circle <div class="circle active"></div>, to be beside the name. right now, it is appearing at the top.

<h4 class="media-heading">
  {{#if equals 'status.active' 'true' }}
   <div class="circle active"></div> 
  {{else}}
   <div class="circle not-active"></div>
 {{/if}}<a href="/student/{{slug}}" target="_parent">{{firstname}} {{lastname}}  <small class="pull-right">{{ createAt}}<label><input type="checkbox" name="eachstudents" value="{{_id}}">Add to Module</label></small></a></h4>
Solution

  • The issue is because the <div> is a block level element.

    You could either:

    1. use a <span> element instead of the <div>
    2. give your <div> a display: inline-block property