i want <p class … fixed in the middle no matter how the information changes:
code:
{% extends “base.html” %}

{% block content %}
<style>
html {
position: fixed;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

html, body {
overflow: hidden;
height: 100%;
}

.container {
margin: 120px auto;
padding: 20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}

.card {
background: linear-gradient(45deg, rgba(112, 145, 230, 0.8), rgba(112, 145, 230, 0.45));
backdrop-filter: blur(7.3px);
padding: 15px;
border-radius: 12px;
display: flex;
flex-direction: column;
width: 750px;
margin-bottom: 20px;
border: 2px solid #ccc;
cursor: pointer;
position: relative;
max-height: 400px;
}

.card.alert-card {
background: orange;
}

.card-content {
color: #000;
}

.driver-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(7.3px);
padding: 10px;
border-radius: 12px;
margin-top: 10px;
display: none;
position: absolute;
left: 790px; /* Adjust the distance from the product card */
top: 0;
width: 350px;
max-height: 390px;
border: 2px solid #ccc;
opacity: 0;
transform: translateX(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}

.driver-card.active {
display: block;
opacity: 1;
transform: translateX(0);
}

.card strong {
color: #000;
}

.total-price {
text-align: right;
color: #000;
background: rgba(255, 255, 0, 0.2);
padding: 10px;
border-radius: 8px;
display: inline-block;
}

.total_price {
font-size: 25px;
}

.product-id {
position: absolute;
top: 10px;
right: 10px;
}

.quantity {
position: absolute;
top: 50px;
right: 305px;
}

.address {
position: absolute;
top: 85px;
right: 200px;
}

.store_phone {
position: absolute;
top: 120px;
right: 195px;
}

.type {
position: absolute;
top: 156px;
right: 283px;
}

.completed_date {
position: absolute;
top: 190px;
right: 92px;
}

.payment_status {
position: absolute;
top: 223px;
right: 200px;
}

.alert {
position: absolute;
top: 256px;
right: 345px;
}

.search-container button.active, .search-container button:hover {
background-color: #0a7ffb;
color: white;
}

.search-container {
display: flex;
justify-content: center;
background-color: #3d52a0;
padding: 12px 0;
margin-top: 38px;
position: fixed;
top: 0;
width: 100%;
z-index: 2;
}

input[type=text] {
padding: 6px;
margin-top: 8px;
padding-right: 5px;
font-size: 20px;
border: none;
width: 330px;
border-radius: 8px;
text-align: center;
}

.search-container button {
float: right;
padding: 6px 10px;
margin-left: 2px;
margin-top: 8px;
background: #ddd;
font-size: 20px;
border: none;
cursor: pointer;
border-radius: 8px;
}
</style>
<body>
<div class=“search-container”>
<input type=“text” placeholder=“Search…” name=“search”>
<button type=“submit”><i class=“fa fa-search”></i></button>
</div>

<div class=“container”>
{% for product in results.products %}
<div class=“card {% if product.alert %}alert-card{% endif %}” onclick=“toggleDriverDetails(this)”>
<div class=“card-content”>
<p class=“product-id”><strong>Product ID:</strong> {{ product.id }}</p>
<h3>Client Name: {{ product.client_name }}</h3>
<p><strong>Product Name:</strong> {{ product.product_name }}</p>
<p class=“quantity”><strong>Quantity:</strong> {{ product.quantity }}</p>
<p><strong>Client Phone:</strong> {{ product.client_phone }}</p>
<p class=“address”><strong>Client Address:</strong> {{ product.client_Address }}</p>
<p><strong>Store Name:</strong> {{ product.store_name }}</p>
<p class=“store_phone”><strong>Store Phone:</strong> {{ product.Stored_phone }}</p>
<p><strong>Completion Status:</strong> {{ product.complete }}</p>
<p class=“type”><strong>Type:</strong> {{ product.type }}</p>
<p><strong>Created Date:</strong> {{ product.date_create }}</p>
<p class=“completed_date”><strong>Completed Date:</strong> {{ product.date_complete }}</p>
<p><strong>Created At:</strong> {{ product.createAt }}</p>
<p class=“payment_status”><strong>Payment Status:</strong> {{ product.payment }}</p>
<p><strong>Note Delivery:</strong> {{ product.note_delivery }}</p>
<p class=“alert”><strong>Alert:</strong> {{ product.alert }}</p>
<p><strong>Driver:</strong> {{ product.Driver.username }}</p>
<p class=“total_price total-price”><strong>Total Price:</strong> {{ product.total_price }}</p>
</div>
<div class=“driver-card”>
<h4>Driver Details:</h4>
{% if product.Driver %}
<p><strong>ID:</strong> {{ product.Driver.id }}</p>
<p><strong>First Name:</strong> {{ product.Driver.first_name }}</p>
<p><strong>Last Name:</strong> {{ product.Driver.last_name }}</p>
<p><strong>Email:</strong> {{ product.Driver.email }}</p>
<p><strong>Username:</strong> {{ product.Driver.username }}</p>
<p><strong>Phone:</strong> {{ product.Driver.phone }}</p>
<p><strong>Wilaya:</strong> {{ product.Driver.wilaya }}</p>
<p><strong>Baladia:</strong> {{ product.Driver.baladia }}</p>
<p><strong>Job:</strong> {{ product.Driver.job }}</p>
{% else %}
<p>Details not available</p>
{% endif %}
</div>
</div>
{% endfor %}
</div>

<script>
function toggleDriverDetails(card) {
const driverCard = card.querySelector(‘.driver-card’);
driverCard.classList.toggle(‘active’);
}
</script>

</body>
{% endblock %}