I am trying to position elements, an `img` and `div`, side by side which then stack on top of each other when the browser width becomes smaller to make it responsive.

I have managed to do this to a degree however I am unable to get the 2 elements to be the same widths when they are stacked on top of each other.

Also I am having trouble vertically aligning the text in the div to be in the middle instead of the top. 

This is what I am trying to achieve.

![enter image description here](https://i.stack.imgur.com/mH5yh.png)

JSfiddle <https://jsfiddle.net/31c5vLn6/>

Code:

```
.upperSection{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
}
.upperBox{
    background-color:white;
    text-align: center;
    verticle-align:middle;
}
.description{
    background-color: white;
}

<div class="upperSection">
        <img src="https://picturethismaths.files.wordpress.com/2016/03/fig6bigforblog.png?w=419&h=364">
        <div class="upperBox">
            <div class="description">
                <span class="header"><br>Header</span>
                <br><br>
                <span class="text">Text Goes here</span>
            </div>
        </div>
    </div>

```