My goal is to showcase a grid layout containing multiple sections within a div, but I'm encountering an issue where the sections are only displaying as blocks. I am seeking assistance in making the second portion of the data appear flexed. Currently, when attempting to set the Class locationInfo div to display flex, it doesn't have any effect.
I would like the layout to resemble this:
However, at present, it looks like this:
Below is the code snippet for 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>
<style scoped>
#modal-1{
border: none;
...