Look at the grid documentation to understand how they work. For the above example, I made a 4 column grid with two children that span 3 and 1. A gutter of 20px helps keep the two slightly apart.
<div class="grid-4 gutter-20">
<div class="span-3">
...
</div>
<div class="span-1">
...
</div>
</div>
What goes inside each of those grid columns is a fieldset. The fieldset gives us a nice title and a border around our information.
<fieldset class="flakes-information-box">
<legend>Product Specs</legend>
</fieldset>
Our information then goes into our definition lists which in turn goes into our fieldsets.
<dl>
<dt>SKU</dt>
<dd>...</dd>
</dl>
<dl>
<dt>Initial Stock Level</dt>
<dd>...</dd>
</dl>
<dl>
<dt>Cost Price</dt>
<dd>...</dd>
</dl>
<dl>
<dt>Wholesale Price</dt>
<dd>...</dd>
</dl>
<dl>
<dt>Retail Price</dt>
<dd>...</dd>
</dl>
Might look a bit intimidating but it's just a mashup of a bunch of components. It's a grid with 2 columns. Each contain a fieldset. The first fieldset has a nested grid. And the definition lists hold the information.
<div class="grid-4 gutter-20">
<div class="span-3">
<fieldset class="flakes-information-box">
<legend>Product Details</legend>
<div class="grid-4">
<dl class="span-2">
<dt>Product Name</dt>
<dd>...</dd>
</dl>
<dl class="span-2">
<dt>Tags</dt>
<dd>...</dd>
</dl>
</div>
<div class="grid-4">
<dl class="span-2">
<dt>Vendor</dt>
<dd>...</dd>
</dl>
<dl class="span-2">
<dt>Product Type</dt>
<dd>...</dd>
</dl>
</div>
<dl>
<dt>Product Description</dt>
<dd>...</dd>
</dl>
</fieldset>
</div>
<div class="span-1">
<fieldset class="flakes-information-box">
<legend>Product Specs</legend>
<dl>
<dt>SKU</dt>
<dd>...</dd>
</dl>
<dl>
<dt>Initial Stock Level</dt>
<dd>...</dd>
</dl>
<dl>
<dt>Cost Price</dt>
<dd>...</dd>
</dl>
<dl>
<dt>Wholesale Price</dt>
<dd>...</dd>
</dl>
<dl>
<dt>Retail Price</dt>
<dd>...</dd>
</dl>
</fieldset>
</div>
</div>