How to align text with left text

Question

Guys, I created a footer with the footer but I want the text on the left to be aligned with the one on the right same height and same line.

My CSS:

.rodape {
width:100%;                                           
height:40%;                                            
background-color:black;
border: 1px solid #fff;
}

.title_rodape{
font-size:24pt;                                        
color:#808080;                                         
padding-top:20px;
text-align:left;
padding-left:35px;                                    
}

.text_left_rodape{                                    
font-size:16pt;                                        
color:#808080;
padding-top:20px;
text-align:left;                                       
padding-left:45px;
}

.text_right_rodape{
font-size:16pt;
color:#808080;                                         
padding-top:20px;                                      
text-align:right;
padding-right:45px;
}

print of how you are:

Print how I want it to look:

My HTML:

<footer class="rodape">
 <h1 class="title_rodape">Duvidas? Entre em contato.</h1>                                                    
 <p class="text_left_rodape">Perguntas frequentes</p>
 <p class="text_left_rodape">Conta</p>
 <p class="text_left_rodape">Privacidade</p>
 <p class="text_right_rodape">Centro de ajuda</p>       
 <p class="text_right_rodape">Entre em contato</p>
 <p class="text_right_rodape">Avisos legais</p>
</footer>

Answer 1

I tried to make the implementation of footer as simple as possible, I used flexbox and the flex-Basis property, also reduced some unnecessary elements, I hope you like ^^.

:root {
  --bg: black;
  --text-color: #808080;
  
  --title-size: 24pt;
  --footer-item-text-size: 16pt;
  --footer-padding: 20px 35px 20px 25px;
  --footer-item-size: 50%;
}

#footer-wrapper {
   background-color: var(--bg);
   color: var(--text-color);  
   padding: var(--footer-padding);
}

#footer-title {
   font-size: var(--title-size);   
}

#footer-items {
   display: flex;
   flex-wrap: wrap;
}

#footer-items p {
   flex-basis: var(--footer-item-size);
   font-size: var(--footer-item-text-size);
}

<footer id="footer-wrapper">
   <h1 id="footer-title"> Duvidas? Entre em contato </h1>
   <div id="footer-items">
      <p>Perguntas frequentes</p>
      <p>Centro de ajuda</p>  
      <p>Conta</p>
      <p>Privacidade</p>   
      <p>Entre em contato</p>
      <p>Avisos legais</p>
   </div>
</footer>

Answer 2

The simplest way to achieve your layout goal without touching your HTML too much was by using Flexbox, I separated the content from left and right into two Ivs, and the flexbox applied to the parent div div.box did the magic.

<footer class="rodape">
  <h1 class="title_rodape">Duvidas? Entre em contato.</h1>                                                    
  <div class="box">
    <div class="box-list">
      <p>Perguntas frequentes</p>
      <p>Conta</p>
      <p>Privacidade</p>
    </div>
    <div class="box-list">
      <p>Centro de ajuda</p>       
      <p>Entre em contato</p>
      <p>Avisos legais</p>
    </div>
  </div>
  </footer>

and modified css style

.rodape {
  width:100%;                                           
  height:40%;                                            
  background-color:black;
  border: 1px solid #fff;
}

.title_rodape{
  font-size:24pt;                                        
  color:#808080;                                         
  padding-top:20px;
  text-align:left;
  padding-left:35px;                                    
}

.box {
  color: #fff;
  display: flex;
  padding: 0 35px;
}

.box > .box-list {
  margin-right: 50px;
}

.box-list > p {
  font-size:16pt;
  color:#808080;
  padding-top:20px;
}

If you want to go deeper and learn more about flexbox, follow the excellent W3schools link. https://www.w3schools.com/css/css3_flexbox.asp