display: flex;

■基本のセット
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;　←回り込み解除　これがないと横にずっと続く

—–

#ba-before {
display: flex;
align-items: center;(縦中央よせ）
}
.photo {
display: flex;
justify-content: space-evenly;（均等に並べる）
}

わかりやすい
https://qiita.com/hashrock/items/939684b9207dbab1d59e

■高さを揃えて縦中央揃え
https://www.ameamelog.com/flex-center/

■片方だけ横幅固定

.main {　
  -webkit-flex: 1;
  flex: 1;　←固定じゃないほうに
}
.side {
  width: 300px;
}