CSS: позиция вложенного элемента немного вне границ родительского элемента

У меня есть 2 divs, один вложенный внутри другого. Согласно дизайну страницы, вложенный div должен выглядеть "поверх" родительского div, как в этом изображении.

У меня есть CSS, закодированный для обоих элементов, используя отрицательный верхний край на вложенном div, чтобы попытаться имитировать желаемый эффект. Однако вместо того, чтобы появляться вне границ родителя, вложенные div top 10px или около того обрезаются, как в этом изображении.

Я не хочу позиционировать элемент абсолютно, потому что целью этой страницы является то, что она будет отзывчивой.

HTML для divs:

<div class="container-div">
  <div class="child-div">
    ...
  </div>
</div>

CSS для divs:

.container-div {
  padding: 10px 10px 0;
}

.child-div {
  display: inline-block;
  width: 100px;
  height: 60px;
  margin: -15px 10px 0;
  border: 1px solid #efefef;
  background-color: #fff;
}