Responsive HTML for border around logo image - html

Question

I need to make responsive layout of the design attached , please help.
Things to keep in mind:
Can't fix height/width of logo image or any of the div's, it has to be dynamic
5px padding between the border line and the image.
Thanks!
.width100per {
max-width:1100px;
width:100%;
height:1000px;
text-align:center;
margin: 0px auto;
background-color: #808080;
}
.container {
width:100%;
float:left;
}
.container::after {
content: " ";
border-bottom:red 2px solid;
width: 100%;
float: left;
position: absolute;
top: 24%;
left: 0;
z-index: 10;
}
header {
float: left;
width: 100%;
}
header .logo {
float:left;
width:20%;
height:100%;
background-color:#000;
position: relative;
z-index: 20;
}
header .logo img{
width: 100%;
}
<div class="width100per">
<div class="container"></div>
<header>
<div class="logo">
<img src="jessicarose.nordicfinest.com/static/home_333333.png">
</div>
</header>
</div>

Answer 1

add this code in your css
header:after{
content: " ";
border-bottom: red 2px solid;
width: 100%;
float: left;
position: absolute;
bottom: -2px;
left: 0;
z-index: 10;
}
header{
position:relative;
}
.container::after {
display:none;
}

Answer 2

<div class="width100per">
<header>
<div class="logo">
<img src="jessicarose.nordicfinest.com/static/home_333333.png">
</div>
</header>
</div>
/* Css */
header {
float: left;
width: 100%;
padding-left: 20%;
position: relative;
}
header .logo {
float:left;
width:20%;
height:calc(100% + 10px);
height:-moz-calc(100% + 10px);
height:-webkit-calc(100% + 10px);
background-color:#000;
position: absolute;
background-color:#000;
padding: 5px;
z-index: 20;
top: 0;
left: 0;
text-align: center;
}
header .logo img{
padding-top: 20px;
display:inline-block;
float: none;
max-width: 100%;
}