<div class="container">
  <label><input type="text" class='input '></label>
  <label><input type="text" class='input '></label>
  <label><input type="text" class='input nevalid'></label>
  <label><input type="text" class='input nevalid'></label>
  <label><input type="text" class='input '></label>
  <label><input type="text" class='input '></label>
</div>

* {
  box-sizing: border-box;
}

body {
  background: #000;
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  width: 633px;
  flex-wrap: wrap;
  
  label {
    position: relative;
    width: 50%;
    height: 60px;
    // overflow: hidden;
   }
  
  .input { 
    position: relative;
    width: calc(100% + 2px);
    height: calc(60px + 2px);
    padding: 0 30px;
    border: 2px solid #fff;
    background: transparent;
    z-index: 1;
    
    &:focus {
      background: #fff;
      color: #000;
      border: 0;
      outline: none;
    }
  }
}

.container .nevalid { 
  position: absolute;
  top: 0px;
  border: 2px solid red;
  z-index: 10;
  width: calc(100% + 2px);
 }