I need to align two divs side by side, regardless of the container width when one div has a fixed size. Here is a snippet of my HTML markup:
<div class="container-fluid">
<div class="row">
<div class="item">
<div class="date">
<div class="month">APR</div>
<div class="day">6</div>
<div class="weekday">Mon</div>
</div>
<div class="details">
<p>Kickstarter sustainable readymade Neutra viral, crucifix PBR. Migas tote bag art party, narwhal flannel hashtag YOLO XOXO polaroid. Ennui iPhone pour-over kitsch, lumbersexual stumptown gastropub flexitarian. </p>
</div>
</div>
</div>
</div>
and here is the corresponding CSS code:
.date{
display: block;
text-align: center;
width: 4em;
background-image: linear-gradient(#fff,#fff 1em,#e7e7e7);
border-radius: 5px;
}
.month{
background-color: blue;
color: white;
border-top-left-radius: 5px;
border-top-right-radius:5px;
padding: 2px 0 2px 0;
}
.day{
font-size: 2em;
}
.details{
width: calc(100% - 5em);
padding: 5px;
border-radius: 6.5px;
background-color: white;
border: 1px solid rgb(204, 204, 204);
}
.item{
border-radius: 6.5px;
margin: 5px;
padding: 5px;
display: block;
border: 0;
background-color: rgba(0, 0, 0, 0);
background-image: linear-gradient(rgb(242, 242, 242), rgb(242, 242, 242) 1em, rgb(255, 255, 255));
}
I am using Bootstrap and prefer not to use tables to achieve this layout. The left div has a fixed width of 4em and I want the right div to fill up the remaining space. After experimenting with different approaches, I'm reaching out to the Stack Overflow community for guidance.