Horizontal and Vertical alignment of a toolbar with Bootstrap elements

<div class="checkbox">
    <div class="form-inline">
        <label>                                    
            <input type="checkbox"/>
            Other 
        </label>   
        <input type="email" placeholder="someone@somewhere.com" class="form-control"/>
    </div>
</div>

<div class="checkboxinsameline" ng-repeat="item in DefinitionTypes">
     <label>
            <input  type="checkbox" name="item.value" ng-click="DefinitionTypesChecked(item.id)"> {{item.value}}
     </label>
</div>

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

.parent { 
  position: absolute;

  /* dimensions */
  width:  35%
  height: 20%;

  /* centered horizontally */
  margin: 0 auto; 
  left: 0;
  right: 0;

  /* centered vertically */ 
  bottom: 0; 
  top: 45%; 
}

.parentMod {
  top: 10px;
  height: 12%;
}

.parent > div:nth-child(1) {
  left: calc(50% - 125px);
}
.parent > div:nth-child(2) {
  left: calc(50% - 10px);
}

.parentMod > div:nth-child(1), 
.parentMod > div:nth-child(2) {
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
}

.parentMod > div:nth-child(2) {
  top: 35px;
}

const changeLayout = () => {
  document.querySelector('.parent').classList.toggle('parentMod');
};

.parent {
  position: absolute;
  margin: 0 auto;
  bottom: 0;
  right: 0;
  top: 45%;
  left: 0;
  width: 35%;
  height: 20%;
  font-size: 40px;
  transition: all 2s ease;
}

.parent > div {
  text-align: center;
  width: 130px;
  margin: 0px;
  position: absolute;
  top: 10px;
  transition: all 2s;
}

.parent > div:nth-child(1) {
  left: calc(50% - 125px);
}
.parent > div:nth-child(2) {
  left: calc(50% - 10px);
}

.parentMod {
  top: 10px;
  height: 12%;
}
.parentMod > div:nth-child(1), 
.parentMod > div:nth-child(2) {
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
}

.parentMod > div:nth-child(2) {
  top: 35px;
}

<div class="parent">
  <div>Label</div>
  <div>Textbox</div>
</div>

<button onclick="changeLayout()">Switch Layout</button>