CSS - positionnement du texte et des icônes

Question

Je suis en train de créer un site et j'ai reçu un fichier PSD avec le design, mais je suis en difficulté sur une section particulière. Voici comment le dessin devrait -

Et c'est là où je suis -

Je suis sûr que son assez évident pour un développeur front-end expérimenté mais je me sers de flotteurs et afficher et je me bats. Voici le code que je l'ai utilisé pour obtenir ce -

HTML

<section id="home"> 

     <a href="agency.html">Are you an agency?</a> 
     <a href="business.html">Or a business?</a> 
     <div class="container showreel"> 
      <div class="seemore"> 
       <i class="fa fa-angle-down fa-3x" aria-hidden="true"></i> 
       <p>SEE MORE</p> 
      </div> 
      <div class="seeour"> 
       <p>SEE OUR SHOWREEL</p> 
       <i class="fa fa-play-circle-o fa-3x" aria-hidden="true"></i> 
      </div> 
     </div> 
    </section> 

CSS

section#home { 

    height: 480px; 
    max-width: 100%; 
    background: url(../images/homepagemain.jpg) center center no-repeat; 
    background-size: 960px; 
    background-position: center; 
    overflow: hidden; 
    margin-top: 75px; 
    position: relative; 
} 

.showreel { 
    height: 50px; 
    width: 960px; 
    background-color: black; 
    position: absolute; 
    bottom: 0; 
} 

.showreel p { 
    display: inline-block; 
    font-size: 15px; 
    font-weight: normal; 


    color: #ffffff; 
} 

.showreel i { 
    display: inline-block; 
    margin-right: 30px; 
    color: #ffffff; 


} 

.seemore { 
    float: left; 
} 

.seeour { 
    float: right; 
} 

Les icônes ne sont pas exactement les mêmes que dans la conception, mais je peux changer/modifier plus tard. C'est plus le positionnement dont j'ai besoin pour bien faire. Toute aide, appréciée.

MISE À JOUR - Voici comment c'est maintenant.

Answer 1

Vous pouvez faire les parents et les gauche/droite sections flex et utiliser align-items: center pour les centrer verticalement, puis utilisez justify-content: space-between sur le parent pour séparer les éléments aux bords loin. Puis réorganiser les i et p dans l'élément gauche et appliquer un unique margin-left et margin-right aux icônes pour les séparer du texte.

section#home { 
 
    height: 480px; 
 
    max-width: 100%; 
 
    background: url(../images/homepagemain.jpg) center center no-repeat; 
 
    background-size: 960px; 
 
    background-position: center; 
 
    overflow: hidden; 
 
    margin-top: 75px; 
 
    position: relative; 
 
} 
 

 
.showreel { 
 
    height: 50px; 
 
    width: 960px; 
 
    background-color: black; 
 
    position: absolute; 
 
    bottom: 0; 
 
    padding: 0 30px; 
 
    justify-content: space-between; 
 
} 
 

 
.showreel, .showreel > div { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.showreel p { 
 
    font-size: 15px; 
 
    font-weight: normal; 
 
    margin: 0; 
 
    color: #ffffff; 
 
} 
 

 
.showreel i { 
 
    color: #ffffff; 
 
} 
 

 
.seemore i { 
 
    margin-right: 30px; 
 
} 
 

 
.seeour i { 
 
    margin-left: 30px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<section id="home"> 
 
     <a href="agency.html">Are you an agency?</a> 
 
     <a href="business.html">Or a business?</a> 
 
     <div class="container showreel"> 
 
      <div class="seemore"> 
 
       <i class="fa fa-angle-down fa-3x" aria-hidden="true"></i> 
 
       <p>SEE MORE</p> 
 
      </div> 
 
      <div class="seeour"> 
 
       <p>SEE OUR SHOWREEL</p> 
 
       <i class="fa fa-play-circle-o fa-3x" aria-hidden="true"></i> 
 
      </div> 
 
     </div> 
 
    </section>

Answer 2

https://codepen.io/toastEater/pen/rwYRMG

HTML

<div class="container"> 
    <div class="bottom-bar"> 
    <div class="showreel"> 
      <div class="seemore"> 
       <p>SEE MORE</p> 
       <i class="fa fa-angle-down fa-3x" aria-hidden="true"></i> 
      </div> 
      <div class="seeour">  
      <p>SEE OUR SHOWREEL</p> 
      <i class="fa fa-play-circle-o fa-3x" aria-hidden="true"></i> 
      </div> 
     </div> 
    </div> 

</div> 

CSS

.container{ 
     width: 100%; 
     height: 420px; 
     background: url('http://i.imgur.com/5tj6S7Or.jpg') no-repeat top center; 
     position: relative; 
    } 
    .bottom-bar{ 
     position: absolute; 
     bottom: 0; 
     width: 100%; 
     background: rgba(0,0,0,0.7); 
     height: 50px; 
    } 
    .showreel { 
     width: 960px; 
     margin: 0 auto; 
     text-align: left; 
     font-size: 15px; 
     color: #ffffff; 
    } 

    .seemore, 
    .seeour{ 
     display: inline-block; 
    } 

    .seeour { 
     float: right; 
    }