divを互いに隣り合ってフッタに配置します。どうやって？

Question

私のフッタ要素の内部に同じ行にdivを配置する際に問題があります。何が起こるかは、1つのdivがその下の他の場所を押し下げていることです。ここに私のhtmlコードは次のとおりです。

<footer> 
     <div class="footercontact"> 
     email@email.com<br /> 
     phone number<br /> 
     Street name Number<br /> 
     Postnumber 
     </div> 

     <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a> 
     <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>   

    <div id="clockdiv"> 
     <div class="dayItem clockItem"></div> 
     <div class="hourItem clockItem"></div> 
    </div> 
</footer> 

CSSコード：

footer { 
    font-size: 0.75em; 
    text-align: center; 
    clear: both; 
    padding-top: 50px; 
} 

.footercontact { 
    text-align:left; 
    width: 25%; 
} 

#clockdiv 
{ 
    float: right; 
} 

だから、基本的に私は私の最初のdiv、私のアンカー要素とすべてのフッターに隣同士にされる第2のdivをしたいです。どのように私はこれを達成するのですか？ありがとうございました！

Answer 1

footer { 
 
    display: flex; 
 
} 
 

 
footer > div { 
 
    flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    padding: 2em; 
 
    color: white; 
 
}

<footer> 
 
    <div style="background-color: red">Address</div> 
 
    <div style="background-color: green">Links</div> 
 
    <div style="background-color: blue">Clock</div> 
 
</footer>