Make text inside a div wrap onto multiple lines when resized

Question

http://jsfiddle.net/4DhvS/

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).

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;
            }

    <div class="group group2">
            <ul>
                <li>
                    <p class="parameter">
                        GGPawdawdwawdawdawdawdawdwadawdawadawdawdaw<br>
                        sdadawdawdawdawda<br>
                        dawwdawawdawdawd<br>
                        dawaawdawdwaddsd<br>
                        dawawddawd
                    </p>
                    <p class="data">
                        265,265,265,265,265,265,265,265.00<br>
                    </p>
                </li>
                <li>
                    <p class="parameter">
                        GGP<br>
                        sda<br>
                        dawd<br>
                        dawdsd<br>
                        dawdawd
                    </p>
                    <p class="data">
                        265<br>
                        wadw<br>
                        awdaw
                    </p>
                </li>
                <li>
                    <p class="parameter">
                        GGP<br>
                        sda<br>
                        dawd<br>
                        dawdsd<br>
                        dawdawd
                    </p>
                    <p class="data">
                        265<br>
                        wadw<br>
                        awdaw
                    </p>
                </li>
            </ul>
        </div>

Answer 1

Here is a fiddle : http://jsfiddle.net/4DhvS/2/

and a second : http://jsfiddle.net/4DhvS/3/

the first with :

ul .parameters {
    word-break: nowrap;
}
ul .data{
    word-break: break-all;
}

the second with :

ul .data{
    word-break: break-all;
}

Answer 2

Use this in your code:

whitespace:pre-line.