How to align label text (multi-language) in a single line justified above the input box-CodePudding

We have a form that has multiple inputs, the text above each input box has to be in two different languages - English and Arabic. The English text has to be on the left-hand side and the Arabic text has to be on the right-hand side aligned with white space between them.

I have tried using   to seperate both the text but it overflows to the next line on mobile display and I think this is not a feasible way.

I am looking for a neat way to have both the text above the input box, English on the left side and Arabic starting from the right side.

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Montserrat', sans-serif;
    }
    
    .card {
        max-width: 500px;
        margin: auto;
        color: black;
        border-radius: 20 px;
    }
    
    p {
        margin: 0px;
    }
    
    .container .h8 {
        font-size: 30px;
        font-weight: 800;
        text-align: center;
    }
    
    .btn.btn-primary {
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        background-image: linear-gradient(to right, #fb0a47 0%, #fb7697 51%, #0003b0 100%);
        border: none;
        transition: 0.5s;
        background-size: 200% auto;
    
    }
    
    
    .btn.btn.btn-primary:hover {
        background-position: right center;
        color: #fff;
        text-decoration: none;
    }
    
    
    
    .btn.btn-primary:hover .fas.fa-arrow-right {
        transform: translate(15px);
        transition: transform 0.2s ease-in;
    }
    
    
    .text {
        font-size: 14px;
        font-weight: 600;
    }
    
    ::placeholder {
        font-size: 14px;
        font-weight: 600;
    }

<div >
  <p >Customer Name &nbsp; الاسم</p>
    <input  type="text" placeholder="Customer Name" name="name"  required >
</div>

CodePudding user response：

I guess this is what you want.

<div >
    <label for="name">Customer Name </label>
  
    <input  type="text" placeholder="Customer Name" name="name"  required >

    <label for="name"> الاسما </label>
</div>

Do not use

tags for labeling the form input , no css modification currently needed. Hope this helps

CodePudding user response：

Use flex and justify-content: space-between for alignment:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

p {
  margin: 0px;
}

.d-flex{
  width: max-content;
}
.text {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
}

 ::placeholder {
  font-size: 14px;
  font-weight: 600;
}

<div >
  <div >
    <p>Customer Name</p>
    <p>الاسم</p>
  </div>
  <input  type="text" placeholder="Customer Name" name="name" required>
</div>