title: CSS: How do you keep this Div to the right of a float?
body: <p>In my code below, case #1 works correctly. The "advice-area" div stays to the right of the "rating-box".</p>
  
  <p>However, case #2 does not work when the text extends beyond one line. This causes the "advice-area" div to move below the "rating-box"</p>
  
  <p>What is the best way to fix this? Thanks.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
     &lt;style type="text/css"&gt;
      .wrapper {
          width: 400px;
          list-style: none;
      }
      .row {
          border-bottom: 1px solid #E5E5E5;
          padding: 15px  0;
          font-size: 14px;
          clear: both;
      }
      .rating-box {
          float: left;
          height: 70px;
          position: relative;
          width: 60px;
      }
      .thumbs {
          float: right;
          width: 20px;
      }
      .number {
          position: absolute;
          top: 16px;
          left: 5px;
      }
      .advice-area {
          display: inline-block;
          margin-left: 35px;
      }
      .advice-content {
          font-size: 16px;
          margin: 0 0 10px 0;
      }
      .advice-action {
          display: inline-block;
      }
      .add-box {
          display: inline;
          margin-left: 30px;
      }
      .add-box a {
          display: inline-block;
      }
      .share-button {
          display: inline;
          margin-left: 30px;
          cursor: pointer;
      }
      .flag {
          display: inline;
          margin-left: 30px;
          cursor: pointer;
      }
     &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;ul class="wrapper"&gt;
          &lt;li class="row"&gt;
              &lt;div class="rating-box"&gt;
                  &lt;div class="thumbs"&gt;
                      &lt;div&gt; Up &lt;/div&gt;
                      &lt;div&gt; Down &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="number"&gt;1&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="advice-area"&gt;
                  &lt;div class="advice-content"&gt;Case #1: This is correct&lt;/div&gt;
                  &lt;div class="advice-action"&gt;
                      &lt;div class="add-box"&gt;&lt;a href="#"&gt;Plan&lt;/a&gt;&lt;/div&gt;
                      &lt;div class="share-button"&gt;&lt;a href="#"&gt; Share &lt;/a&gt; &lt;/div&gt;
                      &lt;div class="flag"&gt; &lt;a href="#"&gt;Flag&lt;/a&gt; &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt; 
          &lt;li class="row"&gt;
              &lt;div class="rating-box"&gt;
                  &lt;div class="thumbs"&gt;
                      &lt;div&gt; Up &lt;/div&gt;
                      &lt;div&gt; Down &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="number"&gt;2&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="advice-area"&gt;
                  &lt;div class="advice-content"&gt;Case #2: But this really long text does not want to stay right next to the "Up" and "Down" links&lt;/div&gt;
                  &lt;div class="advice-action"&gt;
                      &lt;div class="add-box"&gt;&lt;a href="#"&gt;Plan&lt;/a&gt;&lt;/div&gt;
                      &lt;div class="share-button"&gt;&lt;a href="#"&gt; Share &lt;/a&gt; &lt;/div&gt;
                      &lt;div class="flag"&gt; &lt;a href="#"&gt;Flag&lt;/a&gt; &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>