<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="card">
    <div class="card__side-icon">
      <span class="material-icons">
        calendar_today
      </span>
    </div>
    <div class="card__content">
      <p class="card__date">17th November</p>
      <p class="card__time">11:00AM - 12:00AM</p>
    </div>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap");
:root {
  --main-bg-color: #bbc2ca;
  --card-bg-color: #fff;
  --icon-bg-color: #f8cb95;
  --main-light-onColor: #979ca3;
  --main-dark-onColor: #4b4b4b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --main-bg-color: #040404;
    --card-bg-color: #3a3a38;
    --icon-bg-color: #f7d1a2;
    --main-light-onColor: #aeb4bd;
    --main-dark-onColor: #777676;
  }
}


* {
  font-family: sans-serif;
  box-sizing: border-box;
  margin: 0;
}
body {
  background: var(--main-bg-color);
}
.container {
  background: var(--main-bg-color);
  padding: 100px 0;
}

.card {
  max-width: 300px;
  margin: auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: var(--card-bg-color);
  padding: 1em 0;
  border-radius: 1rem;
}
.card__date {
  color: var(--main-light-onColor);
}
.card__time {
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: 0.5rem;
  color: var(--main-dark-onColor);
}
.card__side-icon {
  color: var(--main-dark-onColor);
  background: var(--icon-bg-color);
  padding: 1rem;
  border-radius: 0.5rem;
}