Problem with div positioning - CSS

Question

I’m developing a hotsite and I’m having problems with css.

How I always leave the button next to the text?

.divFixa{
	font-family: 'Open Sans regular', sans-serif;
	font-style: italic;
	font-size: 11pt;
	color: #4D4D4D;
	background-color: #cccccc;
	z-index: 99999999;
	right: 0.5%;
	margin-top: 35%;
	position: fixed;
	padding: 0.8%;
	font-size: 9pt;
}
.divFixa a{
	color: white;
	font-size: 9pt;
}
.divFixa a:hover{
	color: white;
}
.botaoFixo {
    border-radius: 5px;
    background-color: #ED1C24;
    color: white;
    transition: 0.5s;
    font-family: 'Open Sans extrabold', sans-serif;
}
.botaoFixo:hover {
    border-radius: 5px;
    background-color: #c9040b;
    color: white;
    cursor: pointer;
}

<div class="divFixa">
  <div style="text-align: left;">
    Ligue de qualquer lugar do Brasil
  </div>
  <div style="text-align: right;">
  <a class="btn botaoFixo btn-alert" href="tel:">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;numero telefone&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
  </div>
<div style="margin-top: 2%;">
  WhatsApp para qualquer lugar do Brasil
</div>
<div style="text-align: right;">
  <a class="btn botaoFixo btn-alert" href="https://api.whatsapp.com/send?phone=">numero whatsapp </a> 
</div>
Atendemos em mais de <b>150 cidades</b> dos estados de<br /><b>SP, RJ, MG, PR, PE, PO e no DF.</b>
</div>

Answer 1

Hello,

Start by restructuring:

*Place the text and button inside the same grouping:

<style>
 .list_box{
   display:inline-block;
   width:100%;
 }
.list_box li{
   display:inline-block;
 }
.list_box .left_side{
   display:inline-block;
   float:left;
 }
.list_box .right_side{
   display:inline-block;
   float:right;
 }
 </style>

  <div class="list_box">
  <li class="left_side">
  Ligue de qualquer lugar do Brasil
  </li>
  <li class="right_side">
  <a class="btn botaoFixo btn-alert" href="tel:">Tel</a>
  </li>  
  </div>

Answer 2

A suggestion to keep aligned:

.divFixa{
	font-family: 'Open Sans regular', sans-serif;
	font-style: italic;
	font-size: 11pt;
	color: #4D4D4D;
	background-color: #cccccc;
	z-index: 99999999;
/*	right: 0.5%;
	margin-top: 35%; */
	position: fixed;
	padding: 0.8%;
	font-size: 9pt;
   padding: 15px 5px 15px 15px;

}
.divFixa a{
	color: white;
	font-size: 9pt;
}

.divFixa p{
   float: left;
}

.divFixa a:hover{
	color: white;
}
.botaoFixo {
    border-radius: 5px;
    background-color: #ED1C24;
    color: white;
    transition: 0.5s;
    font-family: 'Open Sans extrabold', sans-serif;
    
    padding: 10px 0;
    display: inline-block;
    margin: 5px;
    float: right;
    width: 130px;
    text-align: center;
    margin: 0 10px;
}
.botaoFixo:hover {
    border-radius: 5px;
    background-color: #c9040b;
    color: white;
    cursor: pointer;
}

<div class="divFixa">
   <div>
      <p>Ligue de qualquer lugar do Brasil</p>
      <a class="btn botaoFixo btn-alert" href="tel:">numero telefone</a>
   </div>
   <div>
      <p>WhatsApp para qualquer lugar do Brasil</p>
      <a class="btn botaoFixo btn-alert" href="https://api.whatsapp.com/send?phone=">numero whatsapp</a>
   </div>
   <p>Atendemos em mais de <b>150 cidades</b> dos estados de<br /><b>SP, RJ, MG, PR, PE, PO e no DF.</b></p>
</div>

Answer 3

You are putting a div to the button, try leaving in the same div of the text.

    <div class="divFixa">

    <div style="text-align: left;">
        Ligue de qualquer lugar do Brasil
        <a class="btn botaoFixo btn-alert" href="tel:">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Número Telefone&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
    </div>

    <div style="margin-top: 2%;">
        WhatsApp para qualquer lugar do Brasil
        <a class="btn botaoFixo btn-alert" href="https://api.whatsapp.com/send?phone=">Número WhatsApp </a> 
    </div>

    Atendemos em mais de <b>150 cidades</b> dos estados de<br /><b>SP, RJ, MG, PR, PE, PO e no DF.</b>
    </div>