Using twitter bootstrap to make this

Using twitter bootstrap to make this

I' am using bootstrap on my website applications. I have setup a fiddle
for it JS FIDDLE. I want accomplish something like the image attached with
the bootstrap. If you see the fiddle I have already used the collapse
plugin from bootstrap. I' am not really sure how to make the Read More and
close feature on it.

HTML
<div class="the_content"><!-- Start the content -->
<div class="our-partner-wrap">
<div class="our-partner-img"><img
src="http://dummyimage.com/170x100"></div>
<div class="our-partner-header">
<div class="our-partner-title"><h4>Finibus Bonorum</h4></div>
<div class="our-partner-content accordion-body collapse"
id="collapseOne">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam at justo lorem. Cras in ullamcorper dolor. Nulla vitae
neque sit amet quam egestas dignissim. Nunc id pellentesque purus,
vel semper justo. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam at justo lorem. Cras in ullamcorper dolor. Nulla vitae
neque sit amet quam egestas dignissim. Nunc id pellentesque purus,
vel semper justo. </p>
</div>
<div class="our-partner-readmore"><a class="accordion-toggle
btn-readmore collapsed" data-toggle="collapse"
data-parent="#accordion2" href="#collapseOne"></a></div>
<div class="our-partner-readmore-closed none"><a
class="accordion-toggle btn-readmore-close" data-toggle="collapse"
data-parent="#accordion2" href="#collapseOne"></a></div>
</div>
</div>
<div class="our-partner-wrap">
<div class="our-partner-img"><img
src="http://dummyimage.com/170x100"></div>
<div class="our-partner-header">
<div class="our-partner-title"><h4>Finibus Bonorum</h4></div>
<div class="our-partner-content accordion-body collapse"
id="collapseTwo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam at justo lorem. Cras in ullamcorper dolor. Nulla vitae
neque sit amet quam egestas dignissim. Nunc id pellentesque purus,
vel semper justo. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam at justo lorem. Cras in ullamcorper dolor. Nulla vitae
neque sit amet quam egestas dignissim. Nunc id pellentesque purus,
vel semper justo. </p>
</div>
<div class="our-partner-readmore"><a class="accordion-toggle
btn-readmore collapsed" data-toggle="collapse"
data-parent="#accordion2" href="#collapseTwo"></a></div>
<div class="our-partner-readmore-closed none"><a
class="accordion-toggle btn-readmore-close" data-toggle="collapse"
data-parent="#accordion2" href="#collapseTwo"></a></div>
</div>
</div>
</div><!-- End the content -->
CSS
.the_content{
margin-top: 30px;
display: inline-block;
width: 590px;
height: 490px;
overflow-x: hidden;
overflow-y: auto;
}
.pacific-heritage{
margin-top: 22px;
}
.pacific-heritage{
margin-top: 22px;
margin-bottom: 9px;
}
.our-partner-wrap{
border-bottom: 1px solid #d6d6d6;
padding-bottom: 21px;
margin-bottom: 21px;
display: inline-block;
float: left;
}
.our-partner-wrap .our-partner-img{
width: 200px;
float: left;
}
.our-partner-wrap .our-partner-header{
width: 365px;
display: inline-block;
}
.our-partner-wrap .our-partner-content{
height: 90px;
}
.our-partner-title h4{
font-size: 14px;
padding: 0;
margin: 0;
}
.btn-readmore{
background: url(http://dummyimage.com/81x10) no-repeat;
width: 81px;
height: 10px;
display: inline-block;
float: right;
}
.btn-readmore-close{
background: url((http://dummyimage.com/81x10) no-repeat;
width: 81px;
height: 10px;
display: inline-block;
float: right;
}