title: HTML: Keep checkbox and associated text together while its container is resized
body: <p>I have an ASP.Net page which renders checkboxes as below  </p>
  
  <p><img src="https://i.stack.imgur.com/GKaDP.jpg" alt="Elements on same line">  </p>
  
  <p>But when I re-size the screen, the controls are crammed together and the checkboxes &amp; their associated text move into different lines and it wouldn't make much sense.  </p>
  
  <p><img src="https://i.stack.imgur.com/1edEh.jpg" alt="Elements on different line">  </p>
  
  <p>I would like to know if there is a way to keep the checkboxes together.</p>
  
  <p>Heres the Code:</p>
  
  <pre><code>&lt;asp:Repeater ID="rpFiles" runat="server" DataSource='&lt;%# Eval("Files") %&gt;' OnPreRender="rpFiles_PreRender" &gt;
      &lt;ItemTemplate&gt;
         &lt;asp:PlaceHolder ID="phFile" runat="server"&gt;
          &lt;asp:CheckBox ID="cbVisibility" AutoPostBack="false" runat="server" Text='&lt;%# string.Format("{0} ({1})", Eval("FileName"), Eval("FileType").ToString().ToUpper()) %&gt;' Checked='&lt;%# !((bool)DataBinder.Eval(Container.DataItem, "IsHidden")) %&gt;' /&gt;
                &lt;asp:HiddenField ID="hfFileID" Value='&lt;%# Eval("FileID") %&gt;' runat="server" /&gt;
         &lt;/asp:PlaceHolder&gt;                            
      &lt;/ItemTemplate&gt;
  &lt;/asp:Repeater&gt;
  </code></pre>