<section class="section-date" id="form">
       <div class="container">
         <div class="date-block">
           <div class="date-item ">
             <div class="date-day">03</div>
             <div class="date-month">
               <div class="date-month-text">августа</div>
               <div class="date-status">
                 <span class="date-checkbox"></span>
                 <span class="date-status-text">ближайший курс</span>
               </div>
             </div>
           </div>
           <div class="date-item active">
             <div class="date-day">05</div>
             <div class="date-month">
               <div class="date-month-text">октября</div>
               <div class="date-status">
                 <span class="date-checkbox"></span>
                 <span class="date-status-text">следующий курс</span>
               </div>
             </div>
           </div>
           <div class="date-item">
             <div class="date-day">30</div>
             <div class="date-month">
               <div class="date-month-text">ноября</div>
               <div class="date-status">
                 <span class="date-checkbox"></span>
                 <span class="date-status-text">следующий курс</span>
               </div>
             </div>
           </div>
         </div>
         <div class="form-block">
           <h3 class="form-block-title">Запишитесь на эту дату</h3>
           <form action="" method="post" class="form">
             <div class="row">
               <div class="col-5 col-sm-6 col-xs-12 form-item">
                 <span>Имя и фамилия</span>
                 <input>
               </div>
               <div class="col-4 col-sm-6 col-xs-12 form-item">
                 <span>E-mail</span>
                 <input>
               </div>
               <div class="col-3 col-sm-5 col-xs-12 form-item">
                 <span>телефон</span>
                 <input type="text">
               </div>
           </form>
         </div>
       </div>
     </section>
.container {
  max-width: 1135px;
  width: 100%;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
}

.row {
  margin-left: -15px;
  margin-right: -15px;
  display: flex;
  flex-wrap: wrap;
}
.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.3333%;
}

/* Form */
.form .row {
  align-items: center;
}

.form-item {
  padding-right: 8px;
  padding-left: 8px;
  margin-bottom: 20px;
}

.form-control,
.form-select {
  border: 1.5px solid #CBCBCB;
  border-radius: 6px;
  color: #1D335B;
  font-size: 18px;
  line-height: 21px;
  padding: 12px 16px;
  width: 100%;
}

.form-control::placeholder {
  color: #9CA0A8;
}
.date-block {
  display: flex;
  flex-wrap: wrap;
}

.date-item {
  color: #6B6D9A;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  height: 114px;
  width: 33.3333%;
}

.date-item.active {
  background: #fff;
  box-shadow: 0 10px 50px rgba(33, 36, 96, 0.1);
  color: #1D335B;
  border-radius: 6px;
  position: relative;
}

.date-day {
  font-size: 56px;
  padding-right: 10px;
}

.date-month-text {
  font-size: 28px;
  padding-bottom: 5px;
}

.date-checkbox {
  background: #E2E2E2;
  border-radius: 3.55556px;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
}

.date-item.active .date-checkbox {
  background: #E2E2E2 url(../images/date/check.png) no-repeat center center;
}

.date-status-text {
  font-size: 17px;
}

.form-block {
  background: #fff;
  box-shadow: 0px 10px 50px rgba(33, 36, 96, 0.1);
  padding: 40px 30px 52px;
}

.form-block-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 30px;
}


/*new styles*/
.form-block {
  position: relative;
}
.date-item.active > div {
  position: relative;
  z-index: 2;
}
.date-item.active:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.