Positioning elements on page by layout

Question

I have a problem. I made the site layout(images on the picture below. Almost everything is good, but there is one problem: it is a block article: When much text, the button is fine, but when little text then the button moves upwards... How do normal positioning, and that it does not affect the other content on the horizontal line?
my code:HTML:

<article id = 'article'>
<section><!--first section-->
     <h1>This is header of theme1</h1>
     <p>
         <img src = "" class = '> Lorem ipsum dolor sit amet..
     </p>
 <a href="#">
     <input type = 'submit' value = '' class = 'button'/>
 </a>
 </section>
 <hr>
<section><!-- [n-1] section-->
     <h1>This is header of theme2</h1>
     <p>
         <img src = "" class = '> Lorem ipsum dolor sit amet..
     </p>
 <a href="#">
     <input type = 'submit' value = '' class = 'button'/>
 </a>
 </section>
 <hr>

CSS:

article
{
display:block;
border-left:1px solid #e5e5e5;
border-right:1px solid #e5e5e5;
max-width:75% !important;
margin-left: 25px;
margin-top:0;
padding-left:5px;
padding-top:5px;
overflow:hidden;
}

article section
{
display:inline-block;
width:100%;
margin-bottom:50px;
}

article img
{
width:350px !important;
    height:350px !important;
}

article .leftText
{
float:left;
margin-right:5px;
margin-bottom:5px;
}

article section .button
{
background-color: red !important;
color: yellow !important;
}

layout: http://i.piccy.info/i9/ef5f5f405a91b18a55c34624ca90b0e7/1417550241/11708/837273/Bezymiannyi.png

this is problem: http://i.piccy.info/i9/bf5a07a3bcc684a91e2ef81c224f55c7/1417550761/462126/837273/Bezymiannyi2.png

Answer 1

I think this will fix your problem:

hr {
    clear: both;
    float: none;
}