How can I align a group text with seperate Widgets - html

Question

I want the text labeled
"I want this text aligned with the bottom widget
" to be aligned with bottom widget.
How do I achieve this? HTML ->
<div class="albums">
<iframe class="albumWidget" src="https://widgets.itunes.apple.com/widget.html?c=no&brc=FFFFFF&blc=FFFFFF&trc=FFFFFF&tlc=FFFFFF&d=&t=&m=music&e=album&w=325&h=370&ids=258634938&wt=discovery&partnerId=&affiliate_id=&at=10lumY&ct=" frameborder=0 style="overflow-x:hidden;overflow-y:hidden;width:325px;height: 370px;border:0px; display=inline;"></iframe>
<h3>Only Built 4 Cuban Linx (1995)</h3>
<p>
" Most cd's I buy, I get sick of in a few weeks or even days. However, this album is so perfectly balanced and groundbreaking that I get chills everytime I listen to it. When I listen to it, it just boggles my mind. " -- A customer
</p>
<p>
“ Beats by RZA are sharp like a razor. ” -- A. Sidletsky
</p>
</div>
<div class="albums">
<iframe class="albumWidget" src="https://widgets.itunes.apple.com/widget.html?c=no&brc=FFFFFF&blc=FFFFFF&trc=FFFFFF&tlc=FFFFFF&d=&t=&m=music&e=album&w=325&h=370&ids=328405814&wt=discovery&partnerId=&affiliate_id=&at=10lumY&ct=" frameborder=0 style="overflow-x:hidden;overflow-y:hidden;width:325px;height: 370px;border:0px;"></iframe>
<p>I want this text aligned with the bottom widget</p>
</div>
CSS ->
.albums {
}
iframe.albumWidget {
float:right;
clear: right;
margin-bottom: 20px;
}
Here's a link to website so you can have look http://raekwon.gteaay.com/discs-baby
Here's a link to a screenshot that shows the website the way I need it to be http://raekwon.gteaay.com

Answer 1

i do not know if this can help.. do check my fiddle
http://jsfiddle.net/ayiem999/HFs2k/
.albums {
}
iframe.albumWidget {
float:right;
clear: right;
margin-bottom: 20px;
}
p{
float:right;
clear: right;
margin-bottom: 20px;
}
<div class="albums">
<iframe class="albumWidget" src="https://widgets.itunes.apple.com/widget.html?c=no&brc=FFFFFF&blc=FFFFFF&trc=FFFFFF&tlc=FFFFFF&d=&t=&m=music&e=album&w=325&h=370&ids=258634938&wt=discovery&partnerId=&affiliate_id=&at=10lumY&ct=" frameborder=0 style="overflow-x:hidden;overflow-y:hidden;width:325px;height: 370px;border:0px; display=inline;"></iframe>
<h3>Only Built 4 Cuban Linx (1995)</h3>
<div>
" Most cd's I buy, I get sick of in a few weeks or even days. However, this album is so perfectly balanced and groundbreaking that I get chills everytime I listen to it. When I listen to it, it just boggles my mind. " -- A customer
</div>
<div>
“ Beats by RZA are sharp like a razor. ” -- A. Sidletsky
</div>
</div>
<div class="albums">
<iframe class="albumWidget" src="https://widgets.itunes.apple.com/widget.html?c=no&brc=FFFFFF&blc=FFFFFF&trc=FFFFFF&tlc=FFFFFF&d=&t=&m=music&e=album&w=325&h=370&ids=328405814&wt=discovery&partnerId=&affiliate_id=&at=10lumY&ct=" frameborder=0 style="overflow-x:hidden;overflow-y:hidden;width:325px;height: 370px;border:0px;"></iframe>
<p class="hi">I want this text aligned with the bottom widget</p>
</div>

Answer 2

This works! And it uses class (reusable, write once and apply class where needed), which the correct way to do it.
.albums {
position: absolute;
}
.reviews {
float: left;
height: 50%;
width: 50%;
}
.albumWidget {
height: 50%;
width: 50%;
float: left;
}
<section class="albums">
<section class="reviews">
<h3>Only Built 4 Cuban Linx (1995)</h3>
<p>
" Most cd's I buy, I get sick of in a few weeks or even days. However, this album is so perfectly balanced and groundbreaking that I get chills everytime I listen to it. When I listen to it, it just boggles my mind. " -- A customer
</p>
<p>
“ Beats by RZA are sharp like a razor. ” -- A. Sidletsky
</p>
</section>
<iframe class="albumWidget" src="https://widgets.itunes.apple.com/widget.html?c=no&brc=FFFFFF&blc=FFFFFF&trc=FFFFFF&tlc=FFFFFF&d=&t=&m=music&e=album&w=325&h=370&ids=258634938&wt=discovery&partnerId=&affiliate_id=&at=10lumY&ct=" frameborder=0 style="overflow-x:hidden;overflow-y:hidden;width:325px;height: 370px;border:0px;"></iframe>
<section class="reviews">
<h3>Only Built 4 Cuban Linx II (2009)</h3>
<p>" Raekwon's sound takes listeners back to gritty Shaolin of the 1990s; however, the production does not sound like leftover beats from that era. Instead, it is a fresh, new take on NYC street life and drama. " -- Intellectualista </p>
</section>
<iframe class="albumWidget" src="https://widgets.itunes.apple.com/widget.html?c=no&brc=FFFFFF&blc=FFFFFF&trc=FFFFFF&tlc=FFFFFF&d=&t=&m=music&e=album&w=325&h=370&ids=328405814&wt=discovery&partnerId=&affiliate_id=&at=10lumY&ct=" frameborder=0 style="overflow-x:hidden;overflow-y:hidden;width:325px;height: 370px;border:0px;"></iframe>
</section>