After making changes to my css/html code, all the elements within a div are now displayed in a single line instead of appearing as separate <p>contents</p> tags with each on a new line. An example of this issue can be seen here:
Dealing with Css and html coding.
.card {
/* width: 320px;*/
/* height: 75px;*/
position: relative;
perspective: 1000px;
margin-bottom: 15px;
border: 3px solid white;
}
.front,
.back {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
position: absolute;
top: 0;
left: 0;
/* width: 100%;*/
/* height: 100%;*/
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
backface-visibility: hidden;
}
.front {
background-color: #fff;
}
.back {
background-color: #f1c40f;
transform: rotateY(180deg);
}
.card:hover .front {
transform: rotateY(180deg);
}
.card:hover .back {
transform: rotateY(360deg);
}
.item {
border: 1px solid red;
}
.container {
margin-top: 30px;
}
.item {
margin-bottom: 15px;
margin-right: 50px;
}
.places {
color: red;
}
.discount {
color: green;
}
.timestamp {
color: blue;
}
.card {
height: 200px;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<!--main contents of the page in blocks form for each item-->
<div class="container">
<div class="row">
<?php $k=1 ?>
<?php foreach($requests as $request) : ?>
<div class="item col-md-3 col-sm-12" id="content<?php echo $k ?>">
<div class="card">
<div class="front">
<p class="telegram_id">
integer id
</p>
<p class="restaurant_name">
</p>
<p class="places">
place count
</p>
<p class="discount">
dicount
</p>
<p class="timestamp">
time updated at
</p>
<button type="button">Wanna order</button>
</div>
<div class="back">
random contents
</div>
</div>
</div>
<?php $k+=1 ?>
<?php endforeach; ?>
</div>
</div>
<!--main contents end is here-->
<!--jquery-->https://jsfiddle.net/pr3w1k8x/
Thank you!