Display dropdown values below images

Question

1) Text , Dropdowns & images are displaying like below image [ 4 rows - 1+1+1+1 ] :

---

2) But we need to display like below image [ 3 rows - 2+1+1 ]

3) I tried below code , now its displaying like below image [ 2 rows - 2+2 ]

.product-options dt, .product-options dd {
    width: 90px;
    vertical-align: middle;
    margin: 0 5px 0 0;
    display: inline-block;
}

First row is fine, its displaying SIZE & MATBOARD , now I need to display "Frame style" in 2nd row and "Frame width" in 3rd row.

Here is Site link

.required {
  float: left;
  padding-right: 15px;
}
.product-options dd {
  padding: 0 0 10px 0;
  margin: 0 0 5px;
  border-bottom: 1px solid #ededed;
}
dd {
  display: block;
  -webkit-margin-start: 40px;
}

<dd>
  <dt>
      <label class="required">
       <em>*size</em>
       </label>
    </dt>
</dd>
<dd>
  <div>
    <select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()">
      <option value="4397" price="30">Mini ( 16.98″x12.00″ ) +Rs30.00</option>
      <option value="4398" price="40">Small ( 16.98″x12.00″ ) +Rs40.00</option>
    </select>
  </div>
</dd>
<dt>
       <label class="required">
       <em>*Frame style</em>
       </label>
    </dt>
<dd>
  <div>
    <select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()">
      <option value="4397" price="30">Cherry</option>
      <option value="4398" price="40">Natural</option>
    </select>
  </div>
</dd>
<dt>
       <label class="required">
       <em>*Frame style Size</em>
       </label>
    </dt>
<dd>
  <div>
    <select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()">
      <option value="4397" price="30">0.75</option>
      <option value="4398" price="40">1.25</option>
    </select>
  </div>
</dd>
<dt>
       <label class="required">
       <em>*Matboard</em>
       </label>
    </dt>
<dd>
  <div>
    <select name="options[325]" id="select_325" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()">
      <option value="4397" price="30">Black</option>
      <option value="4398" price="40">White</option>
    </select>
  </div>
</dd>

Answer 1

Again, if you have no influence on html you can do css hack

try

.product-options dt:nth-of-type(-n+2), .product-options dd:nth-of-type(-n+2) {
     display: inline-block;
     width: 90px;
    }

and remove display: inline-block; and width from other.