I have a problem with my html button and checkbox. Whenever I resize page

Question

0

Asked: May 26, 20262026-05-26T10:30:26+00:00 2026-05-26T10:30:26+00:00

I have a problem with my html button and checkbox. Whenever I resize page

0

I have a problem with my html button and checkbox. Whenever I resize page especially making it very small my button and checkbox goes at the bottom. You can check it by running my code. I want the button and checkbox to stay on the same line with the textbox. Please help. Thanks in advance.

compresstest.html

<html>
<head>
<style type="text/css">
 table#tblTest {
  width: 100%;
  margin-top: 10px;
  font-family: verdana,arial,sans-serif;
  font-size:12px;
  color:#333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
 }

 table#tblTest th {
  white-space: nowrap; 
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
 }

 table#tblTest td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
 }
</style>
</head>

<body>
 <div style="width: 100%;">
  <input type="text" id="searchCompanyText" name="searchCompanyText" />
  <input type="button" id="searchCompanyBtn" name="searchCompanyBtn" value="Search" onclick="searchCompany ();"/>
  <input type="checkbox" id="isActive" name="isActive" checked="checked"   />  Active
 </div>

 <table id="tblTest" style="width: 100%">
  <tr>
   <th>Name</th>
   <th>Address</th>
  </tr>
  <tr>
   <td>Tom</td>    
   <td>UK </td>
  </tr>

  <tr>
   <td>Hans</td>   
   <td>Germany</td>
  </tr>
  <tr> 
   <td>Henrik</td> 
   <td>Denmark</td>
  </tr>
  <tr>
   <td>Lionel</td> 
   <td>Italy</td>
  </tr>
  <tr>
   <td>Ricardo</td>    
   <td>Brazil</td>
  </tr>
  <tr>
   <td>Cristiano</td>  
   <td>Portugal</td>
  </tr>
 </table>
</body>
</html>