I need to customize the width of the date column on my inbox page so that it displays inline without breaking the word.
Even when I use white-space: nowrap, the overflow hides it due to the fixed width.
I want the name and date classes to be displayed inline with equal widths like this example:
Username (date at end) 2 years 5 hours 30 min, 25 sec ago
https://i.sstatic.net/cz1wq.png
Below is the code snippet :
$(".message-wrapper").click(function() {
$(this).toggleClass("swipe-left");
});.messages-container {
overflow-x: hidden;
background: var(--bs-white);
cursor: pointer;
}
.message-wrapper {
all: unset;
display: grid;
grid-template-columns: 60px auto 10ch;
transition: transform 0.3s;
position: relative;
}
/* More CSS styles */
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Round">
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="messages-container mx-3">
<a class="message-wrapper border-bottom p-3">
<div class="thumbnail me-3">
N
</div>
<div class="name h5 m-0">
No One
</div>
<div class="ago-time small">
30 min, 25 sec ago
</div>
<!-- More HTML content -->
</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>