HTML には 2 つの列があります。右側は大きな数字、左側はテキストです。その下のウィンドウのサイズを変更すると、右側の数字が消えたくないので、左側のテキスト (p クラスのパラメーター) が右側の div (p クラスのデータ) と接触したときに折り返されます。
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>