Styling "Widgets" to be inline and underneath each other with smaller screens

Question

I have widgets on the main screen of my website. What I'm trying to do is place them next to each other (Vertical) on large screens and fall underneath (Horizontal) each other on smaller screens.

How can I achieve this? This is what I have so far:

.panel-wrap {
  max-width: 100%;
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  position: relative;
}

#main-content {
  overflow: hidden;
  margin: 0;
  padding: 20px;
  min-height: 580px;
  vertical-align: top;
}


/*#main-content .widget {           
            display:inline-block;
        }*/

#main-content #news h4 {
  font-size: 1.2em;
  line-height: 1.4em;
}

#main-content #news h4 span {
  display: block;
  float: left;
  width: 100px;
  color: #000;
  padding-right: 10px;
}


/* WIDGETS */

.widget {
  margin: 0 0 20px;
  padding: 0;
  background-color: #ffffff;
  border: 1px solid #e7e7e7;
  border-radius: 3px;
}

.widget div {
  padding: 5px;
  min-height: 50px;
}

.widget h3 {
  font-size: 12px;
  padding: 8px 10px;
  text-transform: uppercase;
  border-bottom: 1px solid #e7e7e7;
}

.widget h3 span {
  float: right;
}

.widget h3 span:hover {
  cursor: pointer;
  background-color: #e7e7e7;
  border-radius: 20px;
}


/*.blog-info {
        margin: 0 0 10px;
        font-size: .9em;
        color: #787878;
    }

    #sidebar #blogs .blog-info {
        display:inline-flex;
    }*/

<div class="panel-wrap">
  <div id="main-content">
    <div id="news" class="widget">
      <h3>News</h3>
      <div>
        <h4><span>Jan 22, 2019</span>Blah blah blah blah blah blah blah blah blah</h4>
      </div>
    </div>
    <div id="blogs" class="widget">
      <h3>Blogs</h3>
      <div>
        <h4>Blah blah blah blah blah blah blah blah blah</h4>
        <p class="blog-info">Friday, February 14, 2019 by Data Access Team</p>
        <p>Blah blah blah blah blah blah blah blah blah blah blah</p>
      </div>
    </div>
  </div>
</div>

This is how it currently looks:

Answer 1

Add display: flex to your main-content to keep them side-by-side in desktop view. Use media query to switch flex-direction to column in mobile view.

Now add margin-right to the first widget(news) to wrap it up - see demo below with explanations inline:

.panel-wrap {
  max-width: 100%;
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  position: relative;
}

#main-content {
  overflow: hidden;
  margin: 0;
  padding: 20px;
  min-height: 580px;
  vertical-align: top;
  display: flex; /* keeps them horizontal in normal view */
}

#news { /* margin to separate the widgets */
  margin-right: 20px;
}

@media screen and (max-width: 768px) { /* mobile view */
  #main-content {
    flex-direction: column; /* switch to vertical */
  }
  
   #news{ /* in mobile view we don't need the right margin */
     margin-right: 0;
   }
}

#main-content #news h4 {
  font-size: 1.2em;
  line-height: 1.4em;
}

#main-content #news h4 span {
  display: block;
  float: left;
  width: 100px;
  color: #000;
  padding-right: 10px;
}


/* WIDGETS */

.widget {
  margin: 0 0 20px;
  padding: 0;
  background-color: #ffffff;
  border: 1px solid #e7e7e7;
  border-radius: 3px;
}

.widget div {
  padding: 5px;
  min-height: 50px;
}

.widget h3 {
  font-size: 12px;
  padding: 8px 10px;
  text-transform: uppercase;
  border-bottom: 1px solid #e7e7e7;
}

.widget h3 span {
  float: right;
}

.widget h3 span:hover {
  cursor: pointer;
  background-color: #e7e7e7;
  border-radius: 20px;
}

<div class="panel-wrap">
  <div id="main-content">
    <div id="news" class="widget">
      <h3>News</h3>
      <div>
        <h4><span>Jan 22, 2019</span>Blah blah blah blah blah blah blah blah blah</h4>
      </div>
    </div>
    <div id="blogs" class="widget">
      <h3>Blogs</h3>
      <div>
        <h4>Blah blah blah blah blah blah blah blah blah</h4>
        <p class="blog-info">Friday, February 14, 2019 by Data Access Team</p>
        <p>Blah blah blah blah blah blah blah blah blah blah blah</p>
      </div>
    </div>
  </div>
</div>