To resolve this issue, some adjustments need to be made. One solution is to enclose the text within a div container named jbe-content-container on the same level as the jbe-run-container. The next step involves removing the float: right property from the jbe-run class, rearranging the structure so that the 'jbe-content-container' precedes the jbe-run container, and applying display: inline-block with vertical-align: middle. Additionally, margin and padding may need to be adjusted for proper alignment.
HTML
<div class="jbe-result">
<div class="jbe-content-container">
<h3>small amount of text</h3>
<p>Date saved: 13-09-2013, 12:14 am</p>
</div>
<div class="jbe-run-container">
<div class="jbe-run">Run</div>
</div>
</div>
<div class="jbe-result">
<div class="jbe-content-container">
<h3>text goes here which could be quite long winded which will push the height of the div higher</h3>
<p>Date saved: 13-09-2013, 12:14 am</p>
</div>
<div class="jbe-run-container">
<div class="jbe-run">Run</div>
</div>
</div>
CSS
.jbe-result{
float: left;
width: 96%;
padding: 5px 2%;
border-radius: 5px;
border: 1px solid #c9cfdd;
background-color: #ffffff;
margin-bottom: 6px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-duration: .25s;
transition-duration: .25s;
opacity:1;
height:auto;
position: relative;
display: table-row;
}
.jbe-content-container {
width: 64%;
border-right:1px solid #c9cfdd;
padding-right:2%;
margin-right:1%;
}
.jbe-content-container,
.jbe-run-container {
display: inline-block;
vertical-align: middle;
zoom: 1;
}
.jbe-result h3{
font-size: 14px;
color: #003777;
margin: 0 0 2px 0;
}
.jbe-result p{
color: #888888;
font-size: 12px;
margin: 0;
}
.jbe-run{
margin:0;
float:right;
padding:4px 10px;
width:70px;
color:#ffffff;
font-size:12px;
border-radius:4px;
-webkit-border-radius:4px;
text-align: center;
}
.jbe-run-container{
width:32%;
}
.jbe-run, .jbe-edit, .add-div{
background-image: linear-gradient(bottom, #003777 52%, #005DA4 85%);
background-image: -o-linear-gradient(bottom, #003777 52%, #005DA4 85%);
background-image: -moz-linear-gradient(bottom, #003777 52%, #005DA4 85%);
background-image: -webkit-linear-gradient(bottom, #003777 52%, #005DA4 85%);
background-image: -ms-linear-gradient(bottom, #003777 52%, #005DA4 85%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.52, #003777),
color-stop(0.85, #005DA4)
);
}
Explore this jsFiddle for visualization