unable to display section as flex inside of grid div - html

Question

I am trying to display a div of sections inside of a grid layout but unfortunately the sections only display as block. I am hoping someone will be able to tell me how to display the second portion of the data flexed, currently when I try to select the div inside of Class locationInfo as display flex it does nothing at all.
I want it to look like
but currently it looks like the following
here is my component
<template>
<div id="mainDiv">
<div id="locationInfo">
<!-- left detail section -->
<div>
<section>
<p><b>NYC</b></p>
<small>7:35</small>
</section>
<section>
<img src='../assets/svg/flight.svg' height="40px" width="40px"/>
<small>10/12/20</small>
</section>
<section>
<p><b>SYD</b></p>
<small>10:45</small>
</section>
<div id="AirlinesDetails">
<img src="../assets/svg/home/logo-2.svg" height="40px" width="40px" />
<section>
<b><p>Turkish Airlines</p></b>
<small>cx511 | Airbus 333</small>
</section>
<section>
<p>2 Stop</p>
<small>3h 58min</small>
</section>
</div>
</div>
<!-- second row-->
<div>
<section>
<h4>NYC</h4>
<small>7:35</small>
</section>
<section>
<img src='../assets/svg/flight.svg' height="40px" width="40px"/>
<small>10/19/20</small>
</section>
<section>
<h4>SYD</h4>
<small>10:35</small>
</section>
<div id="AirlinesDetails">
<img src="../assets/svg/home/logo-2.svg" height="40px" width="40px" />
<section>
<b><p>Turkish Airlines</p></b>
<small>cx511 | Airbus 333</small>
</section>
<section>
<p>2 Stop</p>
<small>3h 58min</small>
</section>
</div>
</div>
</div>
</div>
</div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#modal-1{
border: none;
color: black;
}
#modal-1 div{
border: none;
padding-right: 1em;
}
#modalInputdiv1{
margin-top: 1em;
display: flex;
justify-content: left;
}
#modalInputdiv1 div{
border: 1px solid rgba(128, 128, 128, 0.349);
border-radius: 5px;
}
#modalInputdiv1 input{
width: 40%;
height: 2.5em;
border-radius: 5px;
margin-right: 1em;
margin-top: .5em;
border: 1px solid rgba(128, 128, 128, 0.349);
}
#modalInputdiv1 input::placeholder{
padding-left: .5em;
color: black;
}
#modalInputdiv2{
display: flex;
justify-content: left;
margin-top: 1em;
margin-bottom: 1em;
padding-left: .5em;
padding-bottom: .5em;
}
#modalInputdiv2 input::placeholder{
padding-left: .5em;
color: black;
}
#modalInputdiv2 div{
border-radius: 5px;
padding-left: .5em;
border: 1px solid rgba(128, 128, 128, 0.349);
}
#modalInputdiv3{
display: flex;
justify-content: left;
border: 1px solid rgba(128, 128, 128, 0.349);
padding-left: .5em;
}
#modalInputdiv3 div{
width: 50%;
border-radius: 5px;
padding:.5em;
margin-right: 1em;
border: 1px solid rgba(128, 128, 128, 0.349);
}
#modalSaveDiv{
margin-top: 3em;
display: flex;
justify-content: center;
width: 100%;
}
#modalsaveBtn{
background-color:#2E9CFF;
color: white;
border: none;
border-radius: 10px;
height: 40px;
width: 90%;
}
#dob{
border: 1px solid rgba(128, 128, 128, 0.349);
width: 50%;
}
.modalImg{
height: 15px;
width: 15px;
}
#modalInputdiv2 input{
width: 30%;
border-radius: 5px;
margin-right: 1em;
margin-top: .5em;
border: 1px solid rgba(128, 128, 128, 0.349);
}
.modaldivs{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 40%;
height: 2.5em;
margin-top: .5em;
border: 1px solid rgba(128, 128, 128, 0.349);
border-radius: 5px;
}
#modalInputdiv2 p{
margin-top: .5em;
padding: 0 .5em 0 .5em;
}
#modalInputdiv2 img{
margin-top: .5em;
}
.blocked{
display: block;
}
.blockedflex *{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.flexed{
display: flex;
}
.toggleSectionActive{
color: #288EF9;
border-bottom: 1px solid #51D79D;
}
#toggleSections{
background-color: white;
}
#sideBarDiv{
justify-content: center;
padding:.5em;
display: block;
background-image: linear-gradient(#0a78f5, #59B0FF);
border-radius: 5px;
box-shadow: 0 1px 2px #88888877;
}
#flyexlogo {
margin-right:1em;
}
#sideBarDiv div{
justify-content: center;
width: 100%;
}
.sideBarDivicons{
display: block;
margin: 0 auto;
margin-top: 2em;
}
#mainDiv{
font-family: 'Noto Sans JP', sans-serif;
color: rgb(73, 79, 90);
width: 100%;
justify-content: center;
margin: 0 auto;
background-color:#F8F8FF;
border-radius: 10px;
}
#bodyGrid{
margin: 1em;
display: grid;
grid-template-columns: 4% 60% 30%;
}
#middleCol div{
margin: .5em;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
#middleCol section{
text-align: left;
margin: 1em 1.5em 1em 1.5em;
}
#middleCol section small{
font-weight: 600;
color: #BCC0C7;
}
#middleCol section h5:hover{
color: #288EF9;
}
#detailsDiv{
padding-bottom: 1em;
border-bottom: 1px solid rgba(128, 128, 128, 0.158);
}
#detailsDiv div{
background-color: white;
border-bottom: 1px solid rgba(128, 128, 128, 0.384);
}
.detailsDivHeaderSection{
display: flex;
justify-content: space-between;
margin-left:3em;
}
.detailsDivHeaderSection p{
margin-left:1em;
margin-right:2em;
}
#leftTripDetails{
display: flex;
justify-content: space-between;
}
#change{
color: #288EF9;
}
#locationInfo{
display: grid;
grid-template-columns: 30% 30%;
grid-template-rows: 50% 50%;
background-color: white;
}
#locationInfo div{
width: 45%;
display: flex;
}
#locationInfo div img{
height: 40px;
width: 40px;
display: block;
}
#locationInfo small{
color:rgb(54, 54, 54);
}
#AirlinesDetails{
width: 100%;
border-bottom: 1px solid rgba(128, 128, 128, 0.158);
background-color: white;
}
#AirlinesDetails img{
margin-left: 1em;
width: 35px;
height: 35px;
}
#departureandreturnDiv{
padding: .5em 0 0 .5em;
border-bottom: 1px solid rgba(128, 128, 128, 0.158);
background-color: white;
}
#departureandreturnDiv p{
padding-right: 2.5em;
margin-right: 2em;
color: #BCC0C7;
font-weight: 500;
}
#departureandreturnDiv p:hover{
color: #288EF9;
border-bottom: 2px solid #51D79D;
}
</style>

Answer 1

Have a look at this possible solution with flex and see if it helps.
<div class="flight-container">
<section class="flight">
<div class="flight-info">
<div>
<h4>NYC</h4>
<p><small>7:35</small><p>
</div>
<div>
<img src='../assets/svg/flight.svg' height="40px" width="40px"/>
<p><small>10/19/20</small></p>
</div>
<div>
<h4>SYD</h4>
<p><small>10:35</small></p>
</div>
</div>
<div class="flight-info">
<div>
<div class="row">
<div>
<img src="../assets/svg/home/logo-2.svg" height="40px" width="40px" />
</div>
<div>
<strong>Turkish Airlines</strong></b>
<p><small>cx511 | Airbus 333</small><p>
</div>
</div>
</div>
<div>
<h4>2 Stop</h4>
<p><small>3h 58min</small></p>
</div>
</div>
</section>
<section class="flight">.....</section>
</div>
CSS
.flight-container{
display: flex;
}
.flight{
width: 50%;
}
.flight-info{
display: flex;
justify-content: space-between;
}
.row{
display:flex;
}