Bootstrap wysokość kolumny w wierszu

Mam wiersz w bootstrapie jak poniżej, który generuje następujący widok.

W jaki sposób można przesunąć znaki x, + oraz = tak, żeby były na dole i na środku danej kolumny zgodnie z czerwonymi strzałkami. Próbowałem różnych sposobów ze stackoverflow, ale żaden mi nie działa.

            <div class="row">
              <div class="col-xs-2">
                <div class="form-group">
                  <label for="netValue">Wartość netto (zł)</label>
                  <input [(ngModel)]="subscriptionServiceItem.netValue" formControlName="netValue" type="text" class="form-control wide inupt-bold">
                </div>
              </div>
              <div class="col-xs-1">
                   x
                </div>
              <div class="col-xs-2">
                <div class="form-group">
                  <label for="quantity">Ilość</label>
                  <input [(ngModel)]="subscriptionServiceItem.quantity" formControlName="quantity" type="text" class="form-control wide inupt-bold">
                </div>
              </div>
              <div class="col-xs-1">
                +
              </div>
              <div class="col-xs-2">
                <div class="form-group">
                  <label for="vatRate">Stawka VAT</label>
                  <select class="form-control wide inupt-bold" [(ngModel)]="subscriptionServiceItem.vatRate" formControlName="vatRate">
                    <option [ngValue]="23">23%</option>
                    <option [ngValue]="8">8%</option>
                    <option [ngValue]="5">5%</option>
                  </select>
                </div>
              </div>
              <div class="col-xs-1">
                =
              </div>
              <div class="col-xs-3">
                <div class="form-group">
                  <label for="grossValueAdded">Wartość brutto (zł)</label>
                  <input [(ngModel)]="subscriptionServiceItem.grossValueAdded" formControlName="grossValueAdded" type="text" class="form-control wide inupt-bold">
                </div>
              </div>
            </div>

ale który nie działa? próbowałeś dodać klasę z odpowiednio ustawionymi marginesami i paddingami do divów+mobile?

Próbowałem:
http://stackoverflow.com/questions/14819425/bootstrap-div-100-height-of-its-parent-element
oraz
http://stackoverflow.com/questions/11677886/twitter-bootstrap-div-in-container-with-100-height

twój problem wynika raczej z nieznajomości grida i css, wystarczy dodać do swojego pliku css np. klasę z padding-top: 30px; do diva, a potem za pomocą media queries dopieścić na mobilnych i w zasadzie tyle... jak nie wiesz o czym pisze to musisz doczytać zagadnienia, nie na skróty

Wpisanie na sztywno padding-top i wysokość to nie problem tylko zastanawiałem się czy nie ma jakiegoś sposobu, żeby ustawić wysokość diva tak, żeby dostosowywał się do wysokości wiersza z automatu.

Możesz wykorzystać do tego flex (jeżeli jeszcze nie znasz, warto się nauczyć :) ) oraz klase z bootstrapa text-center.

https://jsfiddle.net/o5o9490h/9/