When viewing my label and two textbox controls on a desktop, they are aligned horizontally. However, I want these textboxes to stack on top of each other when the user views the site on mobile. I am using a media query to adjust to a mobile view, and all other lines stack fine with the textbox under the label. The issue arises with the address section because I have two textboxes that I would like to appear on separate lines. Any suggestions for how to achieve this? If you have any questions, feel free to ask. Thank you.
Current CSS
.row { clear: none; width: 100%; overflow: hidden; margin: 5px 0; }
.label { float: left; text-align: right; margin-right: 10px; width: 130px;}
.value { float: left; text-align: left;}
html
<div class="row">
<div class="label">
<asp:Label ID="lblSiteAddress" runat="server" Text="Site Address"></asp:Label>
</div>
<div id="value">
<asp:TextBox ID="txtSiteAddress" runat="server" Width="192px" Height="22px"></asp:TextBox>
<asp:TextBox ID="txtSiteAddress2" runat="server" Width="192px" Height="22px"></asp:TextBox>![enter image description here][1]
</div>
</div >