title: Make text inside a div wrap onto multiple lines when resized
body: <p><a href="http://jsfiddle.net/4DhvS/" rel="nofollow">http://jsfiddle.net/4DhvS/</a></p>
  
  <p>In the HTML, I have two columns. On the right is a large number, on the left, is text. When I resize that bottom window, I don't want the number on the right to disappear, I want the left text (p class parameter) to wrap when it comes in contact with the right div (p class data).</p>
  
  <pre><code>body {
                      margin: 0;
                      padding: 0;
                      font-family: Roboto;
                      font-size: .75em;
                      font-weight: lighter;
                  }
  
              ul {
                  margin: 0;
                  padding: 0;
                  list-style: none;
                  border-bottom: 1px solid #cccccc;
              }
              .group {
                  width: 100%;
                  margin-bottom: 20px;
                  -webkit-box-sizing: border-box;
                  -moz-box-sizing: border-box;
                  box-sizing: border-box;
              }
              .group h2 {
                  display: block;
                  font-size: 14px;
                  background: gray;
                  padding: 5px;
              }
              .group li {
                  clear: both;
              }
              .group p {
                  padding: 3%;
                  text-align: center;
                  font-size: 14px;
              }
              .group2 ul {
                  display: table;
                  width: 100%;
              }
              .group2 li {
                  display: table-row;
              }
              .group2 p {
                  display: table-cell;
                  vertical-align: middle;
                  width: 46%;
                  border-bottom: 1px solid #cccccc;
              }
              .group li:last-child p {
                  border-bottom: 0;
              }
  
              p.parameter {
                  text-align: left;
                  text-wrap: normal;
                  word-wrap: break-word;
              }
  
              p.data {
                  text-align: right;
              }
  
      &lt;div class="group group2"&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;p class="parameter"&gt;
                          GGPawdawdwawdawdawdawdawdwadawdawadawdawdaw&lt;br&gt;
                          sdadawdawdawdawda&lt;br&gt;
                          dawwdawawdawdawd&lt;br&gt;
                          dawaawdawdwaddsd&lt;br&gt;
                          dawawddawd
                      &lt;/p&gt;
                      &lt;p class="data"&gt;
                          265,265,265,265,265,265,265,265.00&lt;br&gt;
                      &lt;/p&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;p class="parameter"&gt;
                          GGP&lt;br&gt;
                          sda&lt;br&gt;
                          dawd&lt;br&gt;
                          dawdsd&lt;br&gt;
                          dawdawd
                      &lt;/p&gt;
                      &lt;p class="data"&gt;
                          265&lt;br&gt;
                          wadw&lt;br&gt;
                          awdaw
                      &lt;/p&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;p class="parameter"&gt;
                          GGP&lt;br&gt;
                          sda&lt;br&gt;
                          dawd&lt;br&gt;
                          dawdsd&lt;br&gt;
                          dawdawd
                      &lt;/p&gt;
                      &lt;p class="data"&gt;
                          265&lt;br&gt;
                          wadw&lt;br&gt;
                          awdaw
                      &lt;/p&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>