Ev Evg

«placeholder»

Родительский div

.parent-div {
display: flex;
}
.parent-div .first-line {
width: 100%;
height: [ровно по высоте строки с элементами]
}
.parent-div .second-line {
width: calc(100% + 100%);
height: [ровно по высоте элементов];
overflow: hidden;
overflow-x: scroll [или auto];
}

Как уже многие ответили:
Для строчного элемента нельзя указать верхний и нижний отступы. Для этого нужно сделать его блочным.
display: block
Как альтернатива использовать
line-height: ...

В HTML есть тег LEGEND, как раз и обеспечивающий вывод заголовка вместо части рамки.

А если серьёзно, то задача элементарно решается посредством презренной табличной вёрстки - достаточно вспомнить об атрибутах colspan и rowspan. Например, так:

<table style="border: none; border-collapse: collapse; width: 800px;">
  <tr>
    <td colspan="2" rowspan="2" style="padding-right: 10px; font-size: 200%; white-space: nowrap;">
      Здесь будет заголовок
    </td>
    <td style="width: 100%;  font-size: 0px;"></td>
  </tr>
  <tr>
    <td style="border-top: 1px solid #000000; border-right: 1px solid #000000; font-size: 0px;"></td>
  </tr>
  <tr>
    <td style="width: 10px; font-size: 0px;"></td>
    <td colspan="2" style="border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; padding: 10px;">
      А здесь будет контент
    </td>
  </tr>
 </table>

А вот та же самая, идея, но в блочной вёрстке:

<div style="width: 800px;">
  <div style="display: table-cell; height: 25px; font-size: 20px; padding: 0px 10px 0px 0px; white-space: nowrap;">
    Здесь будет заголовок
  </div>
  <div style="display: table-cell; width: 100%; height: 25px; vertical-align: top;">
    <div style="margin-top: 12px; height: 12px; border-top: 1px solid #000000; border-right: 1px solid #000000;"></div>
  </div>
  <div style="margin-left: 10px; padding: 10px; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; padding: 10px;">
    А здесь будет контент
  </div>
</div>

При использовании :after можно ещё упростить: codepen.io/anon/pen/kDLiA

На Хабре был похожий вопрос Как реализовать не стандартные (обрезанные) границы в блоке,за которым имеется цветной фон?
Там примеров много

путь к картинке должен быть не относительно страницы на которой будет отображаться, а относительно файла CSS.
скажем для страница лежит в корне, файл CSS в папке CSS, а картинка в IMAGES.
адрес в CSS будет background: url(../images/bg.png);