Расширяемая фигурная скобка с HTML и CSS

Есть ли простой способ эмулировать среду cases, предоставляемую amsmath в LaTeX с помощью HTML и CSS?

Например, в LaTeX можно написать:

\documentclass{article}

\usepackage{amsmath}

\begin{document}

\[
\text{2014-01-05} \quad
\begin{cases} \text{Lorem ipsum \ldots} \\
\text{Lorem ipsum \ldots} \\
\text{Lorem ipsum \ldots} \\
\end{cases}
\]

\end{document}

который производит:

Я хотел бы иметь возможность делать то же самое в HTML и CSS.

Итак, да, я пробовал это (см. его JSFiddle):

HTML:

<div id="blog-post-date">
2013-07-01
</div>

<div id="blog-post-brace">
<span style="font-size:700%">{</span>
</div>

<div id="blog-post-content">

    <div id="blog-floater"></div>

    <div id="blog-post-content-child">

        <p>Title: <a href="#" onclick="location.href='http://stackoverflow.com'; return false;"> Blog about stackoverflow with a really, really, really, really, excessively long title in order to demonstrate a problem </a></p>

        <p>Categories: website, help</p>

        <p>Tags: HTML, CSS</p>

    </div>

</div>

И CSS:

/*
body{
        font-family: "Palatino Linotype", Palatino, serif;
}
*/

#blog-post-date{
        display:inline-block;
        width: 5em;
        height: 10em;
        line-height: 10em;
        text-align: center;
        overflow: hidden;
        margin: 0;
        padding: 0;
        font-weight:900;
}

#blog-post-brace{
        display: inline-block;
        width: 2em;
        height: 10em;
        line-height: 10em;
        text-align: center;
        overflow: hidden;
        margin: 0;
        padding: 0;
}

#blog-post-content{
        position: relative;
        display: inline-block;
        width: 20em;
        height: 10em;
        overflow: hidden;
        margin: 0;
        padding: 0;
        font-size: small;
}

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

• Во-первых, он сталкивается с проблемами, когда заголовок сообщения в блоге (или любая строка, действительно) становится чрезмерно длинным. { в настоящее время установлен на фиксированный размер и не динамически масштабируется с метаданными для сообщения в блоге. Это можно увидеть в примере JSFiddle, где линия "Теги" теперь находится ниже нижней части фигурной скобки. Если динамическое масштабирование невозможно, я готов согласиться на white-space: nowrap;, overflow: hidden; и text-overflow: ellipsis; - на метаданные сообщения в блоге и просто с тремя строками текста, независимо от длины метаданных.

• Мой код также зависит от шрифта. Если вы раскомментируете изменение шрифта в верхней части раздела CSS в JSFiddle example, вы увидите, что середина фигурного скобки больше не совпадает с датой публикации после изменения шрифта.

• Способ масштабирования скобки может сделать довольно уродливую скобку, по крайней мере, в шрифте примера, который в настоящее время стоит. (Возможно, этот вопрос и этот ответ мог бы помочь?)

Таким образом, мой вопрос заключается в том, есть ли способ исправить то, что я пытался до сих пор, чтобы решить эти проблемы, или есть ли лучший способ сделать это с помощью HTML и CSS. Предпочтительно, решение будет только использовать HTML и CSS.