I am currently working on creating a responsive form in asp.net. I need help combining two divs to make them responsive. Here is the output of my code for reference.
.container {
padding-right: 15px;
padding-left: 0px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
.txtBoxLeft {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border: solid 1px #5250fb;
float: left;
width: auto;
padding: 14px;
font-size: 16px;
background-color: #908fff;
color: white;
}
.txtBoxRight {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border: solid 1px #5250fb;
float: left;
font-size: 16px;
padding: 14px;
margin-right: 12px;
}
.txtBoxRight:focus {
border: solid 1px #908fff;
background-color: #f3f4ff;
}
.txtBoxRight-1 input[type="text"] {
width: 70%;
margin-bottom: 12px;
}
.txtBoxRight-7 input[type="text"] {
width: 30%;
margin-bottom: 12px;
}<div class="container">
<div class="txtBoxLeft">CNIC #</div>
<div class="txtBoxRight-1">
<asp:TextBox ID="txtCNIC" CssClass="txtBoxRight" runat="server"></asp:TextBox>
</div>
</div>
<div class="container">
<div class="txtBoxLeft">Drop 1-ID</div>
<div class="txtBoxRight-7">
<asp:TextBox ID="txtDrop1ID" Class="txtBoxRight" runat="server" ToolTip="ID"></asp:TextBox>
</div>
</div>I have provided the code and output details above. Appreciate any assistance. Thank you!