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

i'm having trouble trying event-info class text align right of events calendar vertical list. floating events-list right seems collapse text altogether, don't want. here html , 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 , events-->

you can float calendar box left. better result, wrap events-info + button container (to avoid text wrap new lines below calendar box, see 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 floating*/ } .calendar {   float: left;   margin-right: 20px; } .events-container {   overflow: auto; /*prevent text wrap below 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 eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>      <div class="events-info">2. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>      <div class="events-info">3. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>      <button class="view-all-events">view all</button>    </div>  </div>  <!-- workshop , events-->