Bootstrap 3.0 is utilized in the design. My goal is to have uniform height for all boxes, with the "more" link on the right box positioned correctly. However, the box ends before reaching the more link.
Take a look at this JSFiddle example.
Here is the HTML structure:
<div class="container body-content">
<div class="row categoryrow">
<div class="col-md-6 categoryblock">
<div class="category">
<div>
India faces acute shortage of cancer specialists, only one doctor available for every 2,500 patients
India faces acute shortage of cancer specialists, only one doctor available for every 2,500 patients
</div>
<span class="morelink">
<a href="/Category/Health">More..</a>
</span>
</div>
</div>
<div class="col-md-6 categoryblock">
<div class="category">
<div>
Sensex, Nifty slightly up in early trade
</div>
<span class="morelink">
<a href="/Category/Business">More..</a>
</span>
</div>
</div>
</div>
</div>
The CSS styles are as follows:
.categoryrow {
display: flex;
}
.categoryblock {
margin-bottom: 10px;
width: 100%;
}
.category {
border-radius: 5px;
border: 1px solid #2bbcef;
height: 100%;
padding: 2px;
}
.morelink {
font-style: italic;
float: right;
bottom: 0;
right: 0;
position: absolute;
margin-right: 20px;
}