我们有一个有多个输入的表单，每个输入框上方的文本必须使用两种不同的语言——英语和阿拉伯语.
我曾try 使用 来分隔两个文本，但它会溢出到移动显示屏上的下一行，我认为这不是一个可行的方法.
我正在寻找一种简洁的方式，将文本放在输入框上方，英语放在左侧，阿拉伯语从右侧开始.
* {
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 class="d-flex flex-column">
<p class="text mb-1">Customer Name الاسم</p>
<input class="form-control mb-3" type="text" placeholder="Customer Name" name="name" required >
</div>