異なるdiv要素内のボタンのための平等な縦方向の間隔

Question

現在のところ、それはページにどのように見えるか：

目標：私は関係なく、（ぼやけ）の同じ高さに設定されたオレンジ色のボタンを作成しようとしていますその上のテキスト。

関連SCSS：

.medium-2 { 
    padding: .5rem; 
    background-color: white; 
    box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.10); 
    margin-left: 2.5em; 
    text-align: center; 
    float: left; 
    width: 20%; 
    height: 450px; 
    h4 { 
     font-size: 16px; 
     border: none; 
     color: #5d5d5d; 
     font-family: $font-family-sans-serif; 
    } 
    p { 
     padding-bottom: 10%; 
    } 
    .button { 
     text-align: center; 
    } 
    } 

これを行うための非ハック方法はありますか？現在のところ、私の唯一の修正点は、html.erbファイルに入って、padding-downの一部をpの小さなブロックに追加してオレンジ色のボタンを押し下げてください。

Answer 1

Flexboxは簡単に解決できます。

.content { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 1px solid; 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    margin-right: 10px; 
 
} 
 

 
p { 
 
    margin: 0; 
 
} 
 

 
button { 
 
    margin-top: auto; 
 
    width: 200px; 
 
}

<div class="content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit rerum neque laboriosam perspiciatis sapiente optio ipsam ea magni, accusantium eos quaerat ullam facilis hic quo aperiam a iure porro inventore.</p> 
 
    <button>Button</button> 
 
</div> 
 

 
<div class="content"> 
 
    <p>Lorem ipsum dolor sit amet</p> 
 
    <button>Button</button> 
 
</div>