How can I achieve this header layout? - css

Question

I am trying to implement the following header design in Bootstrap.
I tried using the grid system but this does not feel like it should be the way to go. The code I have so far does not place the 2 buttons in the right lower corner in the correct position.
The HTML:
<div class="row">
<div class="col-sm-12 mb-3">
<div class="line"></div>
<div class="row">
<div class="col-sm-3 pt-4 pl-5">
<img src="logo.png" class="logo" />
</div>
<div class="col-sm-5"></div>
<div class="col-sm-4">
<a class="btn btn-primary" href="#" role="button">choice 1</a>
<a class="btn btn-primary" href="#" role="button">choice 2</a>
</div>
</div>
</div>
</div>
The CSS:
.line {
position: relative;
}
.line::after {
content: "";
background-color: #ed1e79;
position: absolute;
width: 100%;
height: 20px;
top: 90px;
left: 0px;
z-index: -1;
}
.btn {
border-radius: 0 !important;
}

Answer 1

The line shouldn't be an element in your markup. It should be a background image or a pseudo-element on an existing container element. You can then use Bootstrap's flex structure and align the two buttons vertically at the end of the column.
.bg-line {
background-image: linear-gradient(180deg,
transparent calc(50% - 6px),
#ff0000 calc(50% - 6px),
#ff0000 calc(50% + 6px),
#ffffff calc(50% + 6px));
}
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css"/>
<div class="bg-line d-flex justify-content-between align-items-end">
<div class="col"><!-- flexes to fill space -->
<img src="https://via.placeholder.com/90" class="logo" />
</div>
<div class="col-auto btn-group"><!-- shrinks to fit content -->
<a class="btn btn-primary btn-sm" href="#" role="button">choice 1</a>
<a class="btn btn-secondary btn-sm" href="#" role="button">choice 2</a>
</div>
</div>
Fiddle demo

Answer 2

using flex - d-flex, align-items - align-items-end and justify-content - justify-content-between it should work.
example in CSS:
header {
margin: 10px;
display: flex;
justify-content: space-between;
border: solid 2px black;
padding: 10px;
align-items: flex-end;
}
.img {
height: 100px;
width: 100px;
border: solid 2px black;
border-radius: 50%;
}
.btns {
height: 20px;
width: 150px;
border: solid 2px black;
}
<header>
<div class="img"></div>
<div class="btns"></div>
</header>