What's a simple CSS method to complete my "cross?" - html

Question

I want to create a special box/div for this message board which adds the top part of the cross to this project. Ideally, this solution will allow a small picture to the left of the bar and the banner/logo will occupy the space to the right of the top bar.
I cannot wrap my head around how to create two div elements where the left side is a fixed width and the right side fills the remaining browser space. link to test-site: https://bchristiancross.runboard.com
#wrapper {
position: relative;
width: 95%;
margin: 0 auto;
border: 2px solid #FF0000;
}
#header {
text-align: center;
height: 175px;
background: #FFFF80;
}
#content,
#footer {
margin-left: 175px;
border: 1px solid #0000FF;
border-left: 50px solid #0000FF;
}
#content:after {
content: '';
position: absolute;
width: 400px;
left: 0;
top: 125px;
border-top: 50px solid #0000FF;
}
<div id="wrapper">
<div id="header">
board banner/logo goes here
<h1>Your board name here</h1>
</div>
<!-- end header -->
<div id="content">
</div>
</div>

Answer 1

Use 'css flex', I hope it helps your question.
There is good web site to learn about CSS Flex
Following code is an example that you might want to do, I hope it answers your question.
index.html
<div id="header" class="flex_container">
<div class="flex_left">
<img alt="picture" src="">
</div>
<div class="flex_right">
board banner/logo goes here
<h1>Your board name here</h1>
</div>
</div>
main.css
.flex_container {
display: flex;
}
.flex_left{
min-width: 175px;
padding-bottom: 50px;
display: flex;
justify-content: center;
align-items: center;
border-right: 50px solid #0000FF;
}
.flex_right{
width: 100%;
}