Make buttons 100% when text pushes it below image

Question

This is a complicated one and I don't even know if it is possible with CSS only.

I have an image, a piece of text and two buttons. When the text is small, and doesnt grow below the image, I want the buttons to be the next to the image. But when the text is so large it needs to continue below the image I want the buttons to grow to 100% width. Long story short, I want the buttons to be the same size as the text.

This is the desired result for small text.

This is the desired result when the text grows

Is this possible to do with CSS only?

I've created a codepen for my current setup (only small text). http://bit.ly/1TwajIf

Answer 1

DEMO (try changing the height of the .img or the width of the output)

Great question! this is actually possible using only css.

I made the image float: left then use flex box for the container of the buttons like

.fill{

  outline: 1px solid red;
  display: flex;
}

.fill>*{

  flex-grow: 1;

}

check the demo for full detail