title: Force max-width 100% on div and contents
body: <p>I'm trying to display information for a plant right next to it and I want to force the information to stay right of the image of the plant as long as the screen has a specific min width.</p>
  
  <p>Problem is: if the information contains a line that's longer than the normal width of 100% of leftover width-space in the parent div, the information div is shown below the image.</p>
  
  <p>Example with good line length (no div wrap): <a href="https://jsfiddle.net/o3sjug9q/" rel="nofollow">https://jsfiddle.net/o3sjug9q/</a><br>
  Example with too much line length (div wrapped around): <a href="https://jsfiddle.net/seL72mt9/" rel="nofollow">https://jsfiddle.net/seL72mt9/</a>  </p>
  
  <p>How do I force the details div to wrap his text rather than wrapping itself to the next line?</p>
  
  <pre><code>&lt;div class="outer"&gt;
  &lt;div class="slidecontainer row" id="biodivslider" data-id="1"&gt;
  &lt;div class="sliderbtn nowrap" onclick="bwdpic()"&gt;&amp;lt;&lt;/div&gt;
  &lt;div class="wrap"&gt;
    &lt;div class="detailimg"&gt;&lt;img src="http://www.nachhaltiger-weinbau.net/wp-content/plugins/biodivslider/img/Milchsterne/Dolden-Milchstern_Ornithogalum_umbellatum-Tci_2004.jpg" class="detailimg"&gt;&lt;/div&gt;
    &lt;div class="details"&gt;
      &lt;p&gt;&lt;span class="detailslabel"&gt;Name:&lt;/span&gt;&lt;br&gt;Milchsterne&lt;/p&gt;
      &lt;p&gt;&lt;span class="detailslabel"&gt;Lateinischer Name:&lt;/span&gt;&lt;br&gt;(Ornithogalum spec.), O. umbellatum, O. nutans&lt;/p&gt;
      &lt;p&gt;&lt;span class="detailslabel"&gt;Standort:&lt;/span&gt;&lt;br&gt;mäßig trocken, sandig, Wärmezeiger, mäßig stickstoffreich&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="sliderbtn nowrap" onclick="fwdpic()"&gt;&amp;gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div.outer {
    width: 833px;
    height: 491px;
    background: lightblue;
  }
  div.slidecontainer {
    max-height: 300px;
  }
  
  div.row {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 10px;
    max-height: 300px;
  }
  
  div.row &gt; div {
    float: none;
    display: table-cell;
    height: 100%;
    width: 100%;
  }
  
  div.row &gt; div.wrap &gt; div {
    float: left;
  }
  #
  div.detailimg {
    height: 300px;
    width: 300px;
  }
  
  img.detailimg {
    display: block;
    max-height: 300px;
    max-width: 300px;
  }
  
  div.details {
    max-width: 100%;
    vertical-align: middle;
    word-wrap: break-word;
    overflow: visible;
  }
  
  span.detailslabel {
    font-size: smaller;
    font-weight: bold;
  }
  
  div.details &gt; p {
    line-height: 90%;
    word-wrap: break-word;
    overflow: visible;
  }
  
  div.sliderbtn {
    font-size: 50px;
    font-weight: 900;
    min-height: 300px;
    height: 100%;
    width: 60px !important;
    line-height: 300px;
    text-decoration: none;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
  }
  </code></pre>