title: How to make div not jump to next line, but fluid instead? when browser resizes
body: <p>How do I keep the purple div from jumping to the next line? I want the text to stay fluid and not jump to the next line when browser resizes. Meaning the green and purple div will stay inline no matter what.</p>
  
  <p>Here is what I have so far - <a href="https://jsfiddle.net/Ljcu1hyw/" rel="nofollow">https://jsfiddle.net/Ljcu1hyw/</a></p>
  
  <p>Forgive me if this is a stupid question, but I must be missing something here and just need a second opinion.</p>
  
  <p>Thanks for your time folks!</p>
  
  <pre><code>.marco-maggio {
    width: 100%;
    height: 100%;
    background: #f0f0ef;
    box-sizing: border-box;
    padding: 80px 0px 100px 0px;
  }
  
  .marco-maggio .profile-wrapper {
    background: #FFBFBF;
    height: 100%;
    width: 100%;
    max-width: 1130px;
    margin:0 auto;
  }
  
  .profile {
    height: 100%;
    width: 340px;
    background: #DFFFBF;
    padding: 0 20px;
    box-sizing: border-box;
    display: inline-block;
  }
  
  .description {
    height: 100%;
    width: 100%;
    max-width: 780px;
    background: #DFBFFF;
    display: inline-block;
    box-sizing: border-box;
    padding: 0 20px;
    Float: right;
  }
  .description h1 {font-family: 'Montserrat', sans-serif; font-size: 34px; font-style: normal; font-weight: 700;}
  .description h2 {font-family: 'Playfair Display', serif; font-size: 20px; font-style: italic; margin-top: 5px;}
  .description span {font-family: 'Source Sans Pro', sans-serif; font-size: 16px; display: inline-block; margin-top: 50px;}
  
  .profilepic {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: #80BDFF;
  }
  
  .profile-span {
    font-size: 15px;
    font-family: 'Source Sans Pro', sans-serif;
    margin-top: 50px;
  }
  </code></pre>