Верстка адаптивных блоков

html, 
body { 
  padding: 0; 
  margin: 0; 
  background: #ccc; 
} 
 
.items { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-around; 
} 
 
.item { 
  width: calc((100% - 40px) / 2); 
  background: #fff; 
  margin-bottom: 20px; 
}

<div class="ask_us"> 
  <div class="items"> 
    <div class="item vk"> 
      <p>Задайте нам вопрос в VK. Мы расскажем подробности партнерской программы.</p> 
      <a href="#">Задать вопрос</a> 
    </div> 
    <div class="item email"> 
      <p>Не сможете быть онлайн? <span>Получите запись вебинара </span>на почту или в VK</p> 
      <a href="#">Получить запись</a> 
    </div> 
    <div class="item other"> 
      <p>Хотите, чтобы мы оповестили Вас о вебинаре любым другим способом?</p> 
      <a href="#">Оставить заявку</a> 
    </div> 
  </div> 
</div>

html, 
body { 
  padding: 0; 
  margin: 0; 
  background: #ccc; 
} 
 
.items { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-around; 
} 
 
.item { 
  max-width:svoi variant; 
  flex-basis:300px;/*пространство за которое боряться элементы, каждый эелемент будет занимать себе 400пикс, это я к примеру, там подбирать можно, но не задавай в процентах только*/ 
  background: #fff; 
  margin-bottom: 20px; 
  display: 
}

<div class="ask_us"> 
  <div class="items"> 
    <div class="item vk"> 
      <p>Задайте нам вопрос в VK. Мы расскажем подробности партнерской программы.</p> 
      <a href="#">Задать вопрос</a> 
    </div> 
    <div class="item email"> 
      <p>Не сможете быть онлайн? <span>Получите запись вебинара </span>на почту или в VK</p> 
      <a href="#">Получить запись</a> 
    </div> 
    <div class="item other"> 
      <p>Хотите, чтобы мы оповестили Вас о вебинаре любым другим способом?</p> 
      <a href="#">Оставить заявку</a> 
    </div> 
  </div> 
</div>