I'm trying to lay out my site in this way:

[![Desired Layout](https://i.stack.imgur.com/Dpof9.png)](https://i.stack.imgur.com/Dpof9.png)

The image div will contain a variable-sized image, and the image should be vertically and horizontally aligned. The text div will contain a lot of text.

This could easily be done with a table, but I'm trying to make this responsive so that once the site is too small horizontally that the textDiv will no longer float next to imageDiv and will then fall underneath.

The problem I'm having is that the the divs will just take up the required space of their content. How do I ensure that these two will remain the same size when they are floated next to each other?

Once the divs no longer float next to each other them being the same size wouldn't make sense anymore so that functionality would no longer be required.

I found Flex as a possible solution but it isn't well supported. I should mention that their widths will be set to a percentage of the parentDivs width.