Nest rows inside a bootstrap 4 column

I try to nest multiple rows in a column.
In the end it should look like

The problem is that I centered the whole thing vertically and the css rule seems to apply also on my child rows. How can I stop this alignment and make it look like I want? Here is what I got so far:

.vertical-center {
  min-height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="row justify-content-center vertical-center">
        <div class="col-auto">
            <span id="field1">text</span>
        </div>
        <div class="col-auto">
            <span id="field2">text</span>
        </div>
        <div class="col-auto">
            <span id="field3">text</span>
        </div>
        <div class="col-auto">
            <span id="field4">=</span>
        </div>
        <div class="col-auto">
            <div class="row">
                <div class="col">
                    <input type="text" id="field5"/>
                </div>
            </div>
            <div class="row">
                <div class="col-auto">
                    <div id="xy">Bar</div>
                </div>
            </div>
            <div class="row">
                <div class="col-auto">
                    <div id="h">Bar2</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Align the container instead of aligning the content. Apply your CSS to the body

body {
  min-height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container"> <!-- this is mandatory when using row -->
  <div class="row justify-content-center">
    <div class="col-auto">
      <span id="field1">text</span>
    </div>
    <div class="col-auto">
      <span id="field2">text</span>
    </div>
    <div class="col-auto">
      <span id="field3">text</span>
    </div>
    <div class="col-auto">
      <span id="field4">=</span>
    </div>
    <div class="col-auto">
      <div class="row">
        <div class="col">
          <input type="text" id="field5" />
        </div>
      </div>
      <div class="row">
        <div class="col-auto">
          <div id="xy">Bar</div>
        </div>
      </div>
      <div class="row">
        <div class="col-auto">
          <div id="h">Bar2</div>
        </div>
      </div>
    </div>
  </div>
</div>