upcoming events test design - vertical

by John Doe

HTML

<div>Upcoming events</div>
<br><br>
<div class='eventBlock'>
  <div class='textBlock'>
    <div class='title'>International band Music Festival International band Music Festival</div>
    <div class='dates'>Montag 10. Oktober - Sonntag 30. Oktober</div>
    <div class='addressBlock'>
      <div class='icon'><img src='https://raw.githubusercontent.com/seanyeh/fontawesome-svgs/master/svg/map-marker-alt-solid.svg'/></div>
      <div class='address'>36 Guild Street London, UK</div>
    </div>
  </div>
  <div class='photo'></div>
</div>

CSS

body {
  background-color: #ebf2f5;
  font-family: Arial, Helvetica, sans-serif;
}

.eventBlock {
  display: flex;
  background-color: #ccd8dd7d;
  border-radius: 20px;
  width: 100%;
  max-width: 312px; /*temp*/
}

.textBlock {
  padding: 20px 0 20px 20px;
  width: 60%;
}

.photo {
  width: 40%;
  height: 120px;
  border-radius: 0 20px 20px 0;
  background-repeat: no-repeat;
  background-position: center;
  background-color: gray;
}

.title {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.dates {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.addressBlock {
  display: flex;
  font-size: 0.7rem;
  align-items: center;
}

.icon {
  margin-right: 5px;
}

.icon img {
  width: 10px;
}

.address {
  
}