How to display an element underneath another element? - html

Question

I am trying to place my social and email links found with a ul additional-menu, to be displayed under my site's logo and tagline. I seem to be struggling getting it underneath. At the moment it looks like this:
The code below is like so:
.additional-menu {
list-style-type:none;;
margin: 0;
position:relative;
clear:both
}
.additional-menu li{
display:inline-block;
}
.ast-header-html-1{
position:relative;
clear:both;
}
<div class="ast-site-title-wrap">
<h1 class="site-title" itemprop="name">
<a href="https://puffpastrydelights.com/" rel="home" itemprop="url">
Pastry Delights
</a>
</h1>
<p class="site-description" itemprop="description">
Made with love, served with pride
</p>
</div>
<div class="ast-builder-layout-element ast-flex site-header-focus-item ast-header-html-1" data-section="section-hb-html-1">
<div class="ast-header-html inner-link-style-">
<div class="ast-builder-html-element">
<ul class="additional-menu">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>

Answer 1

Wrap the whole thing with div that has display:flex and flex-direction: column
.wholeThing {
display: flex;
flex-direction: column;
border: 1px solid red;
}
.firstBit {
display: flex;
border: 1px solid blue;
}
<div class="wholeThing">
<div class="firstBit">
<div class="logo"><img src="http://placekeanu.com/250" /></div>
<div class="tagline">Keanu is breath taking</div>
</div>
<div class="social">
social one two three
</div>
</div>
`