'How can I align a column heading and contact info in same row? [duplicate]

This might be silly question but yet I am stucked here.

enter image description here

There is A4 size paper in which I want Company Name at the center of the page and in the same row I want WhatsApp and contact number right aligned one after another. Below is my code attached.

Thanks in advance.

.invoice-title {
  font-size: 25px;
  text-align: center;
  font-weight: bold;
  color: #CD1818;
  padding-top: 10px;
}

.invoice-title small {
  font-size: 12px;
  text-align: right;
  padding-top: 10px;
  color: #262a2e;
}
<p class="invoice-title"><span>COMPANY NAME</span>
  <small class="float-right"><i class="fab fa-whatsapp"></i> : 99887766655 \nCall : 5544332211</small>
</p>
htmlcss


Solution 1:[1]

It's easy with flexbox. Try this

.invoice-title{
    font-size: 25px;
    font-weight: bold;
    color: #CD1818;
    padding-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.invoice-title span {
    margin-left: auto;
}

.invoice-title small{
    font-size: 12px;
    text-align: right;
    color: #262a2e;
    margin-left: auto;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<p class="invoice-title">
    <span>COMPANY NAME</span>
    <small>
        <i class="fab fa-whatsapp"></i> : 
        99887766655 <br>Call : 5544332211
    </small>
</p>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions