Align divs to the right and prevent container to collapse - html

Question

I'm having trouble trying to get the event-info class text to align to the right of the events calendar as a vertical list. Floating the events-list to the right seems to collapse my text altogether, which I don't want. Here is my HTML and CSS:
.workshop-events {
width: 100%;
background-color: #f2f2f2;
padding: 1px 20px;
/*padding: 20px;*/
}
.calendar {
width: 75px;
display: table-cell;
}
.calendar .month {
text-transform: uppercase;
font-size: 16px;
border: 1px solid #b2b2b2;
padding: 3px 0;
background: #FFF;
}
.calendar .day {
font-size: 30px;
font-weight: 500;
border: 1px solid #b2b2b2;
border-top: none;
padding: 7px 0;
background: #FFF;
}
.calendar .day {
font-size: 30px;
font-weight: 500;
border: 1px solid #b2b2b2;
border-top: none;
padding: 7px 0;
background: #FFF;
}
.events-info {
font-weight: bold;
font-size: 14px;
}
<div class="workshop-events">
<h1 class="section-heading">WORKSHOP & EVENTS</h1>
<!-- EVENT CALENDAR -->
<div class="calendar">
<div class="month text-center">June</div>
<div class="day text-center">30</div>
</div>
<!--EVENTS CALENDAR-->
<div class="events-info">Lorem Ipsum</div>
<div class="events-info">Dolor Sit Amet Sed</div>
<div class="events-info">Libero</div>
<button class="view-all-events">VIEW ALL</button>
</div>
<!-- WORKSHOP AND EVENTS-->

Answer 1

You can simply float the calendar box to the left. For a better result, wrap all events-info + button into a container (to avoid the text to wrap to new lines below the calendar box, see the demo).
HTML updates:
<div class="events-container">
<div class="events-info">Lorem Ipsum</div>
<div class="events-info">Dolor Sit Amet Sed</div>
<div class="events-info">Libero</div>
<button class="view-all-events">VIEW ALL</button>
</div>
CSS updates:
.workshop-events {
overflow: auto; /*fix possible collapses caused by floating*/
}
.calendar {
float: left;
margin-right: 20px;
}
.events-container {
overflow: auto; /*prevent the text to wrap below the calendar*/
}
.workshop-events {
width: 100%;
background-color: #f2f2f2;
padding: 20px;
}
.calendar {
width: 75px;
display: table-cell;
}
.calendar .month {
text-transform: uppercase;
font-size: 16px;
border: 1px solid #b2b2b2;
padding: 3px 0;
background: #FFF;
}
.calendar .day {
font-size: 30px;
font-weight: 500;
border: 1px solid #b2b2b2;
border-top: none;
padding: 7px 0;
background: #FFF;
}
.calendar .day {
font-size: 30px;
font-weight: 500;
border: 1px solid #b2b2b2;
border-top: none;
padding: 7px 0;
background: #FFF;
}
.events-info {
font-weight: bold;
font-size: 14px;
}
/*NEW RULES BELOW*/
.workshop-events {
overflow: auto;
}
.calendar {
float: left;
margin-right: 20px;
}
.events-container {
overflow: auto;
}
<div class="workshop-events">
<h1 class="section-heading">WORKSHOP & EVENTS</h1>
<!-- EVENT CALENDAR -->
<div class="calendar">
<div class="month text-center">June</div>
<div class="day text-center">30</div>
</div>
<!-- EVENTS INFO-->
<div class="events-container">
<div class="events-info">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="events-info">2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="events-info">3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<button class="view-all-events">VIEW ALL</button>
</div>
</div>
<!-- WORKSHOP AND EVENTS-->