Ryan Claxton Ryan Claxton - 5 months ago 14
HTML Question

html bootstrap display paragraph beside image

The image is basically exactly what I want. However, I need the text paragraph to be aligned with the top of the image. There must be an easy way to get it to move up. I have no idea what it is though? Thanks!
Result



#homePost {
width:50%;
height:auto;
box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;
margin-right: 25px;
margin-bottom: 20px;
}

<div class="well well-sm" style="border: 2px solid chartreuse; background: white;">
<div class="row">
<div class="col-sm-12">
<p><h4>Toronto Maple Leafs Sucking again this year.</h4></p>
<p>Date Posted: 24th of June, 2016</p>
<p style="padding-top: 5px;"> </p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p style="padding-left: 20px; padding-right: 20px;">
<img style="float:left" src="http://i.stack.imgur.com/E0kmH.png" id="homePost">
<span style="float:right">
<p>TEXT GOES IN HERE </p>
</span>
</p>
</div>
</div>
</div>




Answer

add margin-top: 20px;

Like this:

#homePost {
  width: 50%;
  height: auto;
  box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;
  margin-right: 25px;
  margin-bottom: 20px;
  margin-top: 20px;
}

See This Image