Here is my example from jdfiddle:

<http://jsfiddle.net/7RT7a/>

Here is html code:

```
              <div id="product-pack">
                <div name="productRow">
                    <div class="product-title-input">
                        <p class="titles">Product</p>
                        <input name="product" type="text" >
                    </div>
                    <div class="unit-title-input">
                        <p class="titles">Unit</p>
                        <input name="unit" type="text" >
                    </div>
                    <div class="quality-title-input">
                        <p class="titles">Qty.</p>
                        <input name="qty" type="text" >
                    </div>
                </div>

```

Here is CSS:

```
.product-pack {
    float: left;
    width : 96%;
}

#product-pack input {
    width: 95%;
    height: 1em;
    font-size:1em;
    font-weight:bold;
    border-style: solid;
    background-color:#CCC;
    border-color:#999;
    border-width:thin;
    padding: 1% 0 1% 0;
    margin-top: 0.5%;
}

#product-pack .product-title-input, .unit-title-input, .quality-title-input {
    float: left;
    text-align: left;
} 

#product-pack .product-title-input {
    width: 82.5%;
    padding-top: 2%;
}
#product-pack .unit-title-input {
    width: 5%;
    padding: 2% 1.5% 0 0;
}
#product-pack .quality-title-input {
    width: 5%;
    padding-top: 2%;
}

```

In jsfiddle result, you can see that effect of #product-pack input CSS selector only applies to first input element inside #product-pack and no matter what I try, the other two input elements get no effect.

Am I missing something with CSS or HTML? Any help would be appreciated.