Сделать кнопки 100%, когда текст помещает их под изображение ⇐ Html

[Anonymous]

Это сложный вопрос, и я даже не знаю, возможно ли это только с помощью CSS.
У меня есть изображение, фрагмент текста и две кнопки. Когда текст небольшой и не растет под изображением, я хочу, чтобы кнопки находились рядом с изображением. Но когда текст настолько большой, что его нужно продолжать ниже изображения, я хочу, чтобы кнопки выросли до 100% ширины.
Короче говоря, я хочу, чтобы кнопки были того же размера, что и текст.
Это желаемый результат для небольшого текста.


Это желаемый результат при увеличении текста


Можно ли это сделать только с помощью CSS?

Код: Выделить всё

article {
float:left;
width: 500px;
position: relative;
margin-right: 50px;
}

.clearfix {
clear: both;
}

.article-image {
padding-top: 38%;
background-color: grey;
margin: 0px 30px 0px 0;
width: 50%;
height: 0;
display: block;
float: left;
}

h4 {
margin: 0;
}

.article-date {
font-style: italic;
}

.article-text {
margin-top: 20px;
}

.button-group {
position: absolute;
min-width: 49%;
right: 0;
bottom: 0;
margin-left: -0.75rem;
margin-right: -0.75rem;
}

.button-group .col.s6 {
width: 50%;
margin-left: 0;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 0.75rem;
}

.btn{
background: black;
display:block;
padding: 5px;
text-align: center;
color: #fff;
text-decoration:none;
}

Код: Выделить всё

[url=#]Button 1[/url]
[url=#]Button 2[/url]





[url=#]Button 1[/url]
[url=#]Button 2[/url]

Подробнее здесь: https://stackoverflow.com/questions/355 ... elow-image