title: How to align divs horizontally in different screens like desktop,mobiles , etc?
body: <p>I am trying to display divs horizontally i.e "a checkbox along with some content[div]".</p>
  
  <p>Code : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.manager_feed_div_block {
    content: "";
    display: table;
    clear: both;
  }
  
  .appstatus {
    float: left;
    margin-top: 40px;
    margin-right: 10px;
  }
  
  .manager_feed_div {
    background: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    float: left;
    border: 1px solid #dbdbdb;
    padding: 5px;
    margin-right: 20px;
    margin-bottom: 20px;
    width: 218px;
    text-align: left;
    position: relative;
    margin-top: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Title of the document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="manager_feed_div_block"&gt;
      &lt;div class="appstatus"&gt;
        &lt;input type="checkbox" name="app_status" /&gt;
      &lt;/div&gt;
      &lt;div class="manager_feed_div"&gt;
        some content
      &lt;/div&gt;
      &lt;div class="appstatus"&gt;
        &lt;input type="checkbox" name="app_status" /&gt;
      &lt;/div&gt;
      &lt;div class="manager_feed_div"&gt;
        some content
      &lt;/div&gt;
      &lt;div class="appstatus"&gt;
        &lt;input type="checkbox" name="app_status" /&gt;
      &lt;/div&gt;
      &lt;div class="manager_feed_div"&gt;
        some content
      &lt;/div&gt;
      &lt;div class="appstatus"&gt;
        &lt;input type="checkbox" name="app_status" /&gt;
      &lt;/div&gt;
      &lt;div class="manager_feed_div"&gt;
        some content
      &lt;/div&gt;
      &lt;div class="appstatus"&gt;
        &lt;input type="checkbox" name="app_status" /&gt;
      &lt;/div&gt;
      &lt;div class="manager_feed_div"&gt;
        some content
      &lt;/div&gt;
      &lt;div class="appstatus"&gt;
        &lt;input type="checkbox" name="app_status" /&gt;
      &lt;/div&gt;
      &lt;div class="manager_feed_div"&gt;
        some content
      &lt;/div&gt;
      &lt;div class="appstatus"&gt;
        &lt;input type="checkbox" name="app_status" /&gt;
      &lt;/div&gt;
      &lt;div class="manager_feed_div"&gt;
        some content
      &lt;/div&gt;
      &lt;div class="appstatus"&gt;
        &lt;input type="checkbox" name="app_status" /&gt;
      &lt;/div&gt;
      &lt;div class="manager_feed_div"&gt;
        some content
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Output:</p>
  
  <p><a href="https://i.stack.imgur.com/SWBdO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SWBdO.png" alt="Output of what I am tried "></a></p>
  
  <p>Here I faced two problems</p>
  
  <p>1.I want "the checkbox and its corresponding div " should come as a group . But when you notice the output I got , "At the end of the first line , the checkbox is separated from its corresponding div".</p>
  
  <p>2.It is not responsive.  </p>