css - ウィンドウのサイズ変更時にオーバーラップを回避する方法

Question

全部で 3 つの div があります。1 つは、他の左右の div のコンテナーです。コンテナがたくさんあるでしょう。これですべて問題ありませんが、ウィンドウのサイズが変更された場合、CSS は div をオーバーラップしないようにする必要があります。代わりに、次の行に折り返す必要があります。あなたの提案を教えてください。以下は私のコードです。

CSS コード

.divmain
{
width: 100%;
padding: 15px;
height: auto;
}

.divmain .divleft
{
float: left;
width: 16%;

}

.divmain .divright
{

float: left;
width: 84%;
}

コードを表示

<div style="width: 100%;">
 <div class="divmain">
   <div class="divleft">
    <label class="label">Date</label>
   </div>
   <div class="divright">
    <input type="text"/>
   </div>
 </div>
 <div class="divmain">
   <div class="divleft">
    <label class="label">Status</label><span class="mand">*</span>
   </div>
   <div class="divright">
    <label class="label">Pending</label>
   </div>
 </div>
 <div class="divmain">
   <div class="divleft">
    <label class="label">Reference No</label>
   </div>
   <div class="divright">
    <input type="text"/>
   </div>
 </div>
</div>

デモ