Flexbox дополнительное пространство

Question

У меня есть некоторые проблемы с макетом во flexbox

Я не понимаю, почему синие кнопки занимают дополнительное место.

function App() {
  return (
    // eslint-disable-next-line react/jsx-filename-extension
    <div>
      {/* <div className="mainContainer">
        <Header username="Raimondo Pugliesi" />
      </div> */}
      <div>
        <BluRow allocationCard blueButtons availableMoney />
      </div>
      <div className="frontContainer">
        <div className="leftScreen">
          <ChangeRequest inRelease title="CRM Evolution" requestId="1223" cost="1300" supervisor="Alberto rossi" buttonTitle="in Analisi" />
          <ChangeRequest title="Cheope ELE" requestId="1124" cost="600" supervisor="Mario rossi" buttonTitle="valutazione" />
          <ChangeRequest title="Cheope ELE" requestId="1124" cost="600" supervisor="Mario rossi" buttonTitle="valutazione" />
        </div>
        <div className="rightScreen">
          <LateralSearch />
        </div>
      </div>
    </div>
  );
}

и это относительный css

.frontContainer {
    display: flex;
    align-items: center;
}

.leftScreen {
  flex: 1.5;
  border-right: 3px solid #D8D8D8;
}

.rightScreen{
  flex: 1;
  align-self: flex-start;
}

о синей строке компонента внизу, ниже вы найдете его html

class BluRow extends Component {
  render() {
    const {
      release,
      allocationCard,
      blueButtons,
      availableMoney,
    } = this.props;

    return (
      // eslint-disable-next-line react/jsx-filename-extension
      <div>
        <div className="rowTop">
          {release ? <Release releaseNumber="Release #5_2019" expirationDate="19/06/2019" /> : null }
          {availableMoney ? <AvailableMoney amount="23.922" /> : null}
          <div className="gpContainer">
            {blueButtons ? <GpButton buttonName="RICHIEDI EXTRA BUDGET" /> : null }
            {blueButtons ? <GpButton buttonName="CONFERMA LISTA ATTIVITA'" /> : null}
          </div>
        </div>
        <div className="row">
          {allocationCard ? <AllocationCard name="Mario rossi" totalAmount="10.764,90" totalAllocated="14.532,20" /> : null}
          {allocationCard ? <AllocationCard name="Alberto rossi" totalAmount="10.764,90" totalAllocated="14.532,20" /> : null}
          <MyCr percentage={{ amount: 50 }} approved={{ amountApproved: 15 }} warning={{ warningAlert: 5 }} toAnalyze={{ toBeAnalyzed: 3 }} />
        </div>
      </div>
    );
  }
}

, и это css связан с компонентом blueRow

.row {
  display: inline-flex;
  flex-direction: row;
  width: 100%;
  background-color: #E5F7FD;
  padding: 30px 0px 30px 0px;
}

.rowTop {
  background-color: #E5F7FD;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.gpContainer {
  display: flex;
  flex-direction: column;
}

Какое ожидаемое поведение?

Мне нужно выровнять синюю кнопку по поисковому вводу без лишнего пробела на странице.

Я действительно не знаю, где я взял это дополнительное пространство.Потому что, если я попытаюсь вырезать из кода строку синих кнопок, у меня все еще будет свободное пространство справа от ввода.