Trying to set 2 divs side by side

<div class="search_box_area">
<form class="form-wrapper cf">
    <input type="text" placeholder="Search for name/user..." required>
    <button type="submit">Search</button>  Or: 
</form>
 </div>
<!-- 2nd div -->
 
 <div class="mutual_interests_search dropdown">  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Looking for people that:
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Eating Well</a></li>
    <li><a href="#">Train Hard</a></li>
    <li><a href="#">Looking for motivation</a></li>
  </ul>
</div>

div {
  &.search_box_area {
    width: 60px;
    float: left;
    color: green  
  }
  &.mutual_interests_search dropdown {
    display: block;
    margin-left: 62px;
  }
}