Positioning <img> element

[cooknotes]

I have tried multiple things but not position \[code\]<img>\[/code\] at desired position. It is always stuck between two spans. Tried to img out of the child \[code\]div\[/code\] and add it to the parent div. But no luck. I want to position it below my spans and with \[code\]padding-top:20px;\[/code\].This image is a 200x38px image. Here is my code:HTML\[code\]<div class="col1-step2"> <div class="heading-step2"> <span class="heading-step2">Hello signed User.</span> <span class="heading-step2 textblue">How are you doing.</span> <img class="user-bar" src="http://stackoverflow.com/questions/15624099/<?php echo site_url('img/bar.png'); ?>"> </div></div>\[/code\]CSS\[code\].col1-step2 { float: left; width: 40%; height: 100%; background-color: rgba(0, 0, 0, 0.8);}div.heading-step2 { top: 6%; position: relative;}.heading-step2 { font-size: 24px; color: #f7f7f7;}.heading-step2 .textblue { color: #55c7fa; font-weight: bold; display: block;}img.user-bar { position: absolute; padding-top: 25%;}\[/code\]