I am new to bootstrap and web development. I wanted to make a responsive div which always maintains a length to width ratio of 16:9. With a header and footer section above this responsive portion. But the header and footer sections are stacked up on each other. Any help would be appreciated. 

html

```
<div class="post-card-outer">
                <div class="post-card-inner">
                    <div class="space-header">
                    </div>
                    <div class=" post-content">
                        <div class="col-sm-6 content-leftcol">
                            <div class="image-sec-post-card">
                                <img class = "image-post-card" src="3.jpeg">
                            </div>
                        </div>
                        <div class="col-sm-6 content-rightcol">
                            right
                        </div>
                    </div>
                    <div class="space-footer">
                        GGDYGDYGDYGDYGYDGDGYD
                    </div>
                </div><!--post-card-inner-->
            </div><!--post-card-outer-->

```

css

```
    .post-card-outer{
    width: 100%;
    padding-bottom: 56.25%; /* 16:9= 56.25 %; 4:3 = 75%*/
    position: relative;
    background: coral;
    margin-top:50px;
}
.post-card-inner{
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}
.space-header {margin-top:-10px; height:10px; background-color:red;}
.space-footer {margin-bottom:-10px; height:10px; background-color:red;color:white;}
.post-content{
    min-height:100%; background-color:green;
    position:absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}
.content-leftcol{
    background-color:black;
    width:50%;
    height:100%;
}
.content-rightcol{
    background-color:blue;
    width:50%;
}
.image-sec-post-card{
    border:1px solid white;
  vertical-align: middle;
    overflow: hidden;
}
.image-post-card{
    max-width:100%;
    max-height:100%;
    border:1px solid green;
}

```