Make display table-cell use percentage width
Set the ul to display: table in accordance with the rest of your CSS, and give it a width of 100% to fill the parent div. Now your widths should take hold for your "rows" and "cells".
Edit: As per kpeatt, above, who was quicker off the mark!
I found the best way to set table-cell div 100% width from bootstrap source code.
Set width:10000px, it rendered like 100% width.
https://jsfiddle.net/y3qsxb9m/
You're almost there. You just need to add display: table and width: 100% to your ul.group2. You could probably also get away with not supplying a width on your .group2 p elements.
This should work: http://jsfiddle.net/6Kn88/2/
ul {
margin: 0;
padding: 0;
list-style: none;
}
.group {
width: 50%;
margin-bottom: 20px;
outline: 1px solid black;
background: white;
box-shadow: 1px 1px 5px 0px gray;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.group h2 {
display: block;
font-size: 14px;
background: gray;
text-align: center;
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: 2px solid gray;
}
.group li:last-child p {
border-bottom: 0;
}<div class="group group2">
<h2>Health Indicies</h2>
<ul>
<li><p class="parameter">GGP</p><p class="data">265</p></li>
<li><p class="parameter">Comfort</p><p class="data">blah</p></li>
<li><p class="parameter">Energy</p><p class="data">gooo</p></li>
</ul>
<span class="clear"></span>
</div>