Align divs to the right and prevent container to collapse

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 &amp; 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 &amp; 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-->