Solution for multiple inputs fields inside form group but only one is required

This is CSS solution for multiple inputs fields inside .form-group, but one of them is required.

HTML

<form class="form-horizontal">
  <div class="form-group">    
    <label class="col-xs-2" for="exampleInputEmail1">Email address</label>
    <div class="col-xs-4">
        <input type="text" class="form-control" placeholder="field1" required>
    </div>
    <label class="col-xs-2" for="exampleInputPassword1">Password</label>
    <div class="col-xs-4">
        <input type="text" class="form-control" placeholder="field2 not required">
    </div>
  </div>  
  <button type="submit" class="btn btn-default">Submit</button>
</form>

CSS

.form-group.has-error .form-control:not(:required) {
  border-color: #ccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

.form-group.has-error .form-control:not(:required):focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6) !important;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6) !important;
}

.form-group.has-error .form-control:not(:required) ~ .input-group-addon {
  background-color: #eee;
  border: 1px solid #ccc;
  border-left: none;
  color: #555;
}