「サブヘッド」と「説明」テキストを角括弧内に配置するにはどうすればよいですか？

Question

CODEPEN

私はそれが私のポジションと関係していると仮定しています（特定の要素に最も適しているのはまだ分かりません）。私はまた、ユーザーが狭いウィンドウを開いた場合に、括弧を列の範囲内に配置したままにしておきたいと思います。

HTML

<div class="col-md-4 col-md-offset-4"> 
    <div class="space margin-10"> 
    <div class="brackets"> 
     <h1 class="bracket-l">{</h1> 
     <h1 class="bracket-r">}</h1> 
     <h2 class="subhead align-center text-up size-1" id="title">HCM</h2> 
     <p class="description align-center size-1">Uniting Organizations with HR Solutions that Help Drive Revenue | ADP.com</p> 
    </div> 
    </div> 
</div> 

あなたは要素の前/後に使用して、このコードを試すことが

.space { 
    text-align: center; 
    position: relative; 
} 

.bracket-l { 
    font-family: 'proxima-nova', sans-serif; 
    font-size: 15rem; 
    font-weight: 300; 
    text-align: left; 
    position: absolute; 
} 

.bracket-r { 
    font-family: 'proxima-nova', sans-serif; 
    font-size: 15rem; 
    font-weight: 300; 
    text-align: right; 
} 

Answer 1

CSS：

.content { 
 
margin:0 auto; 
 
padding:50px; 
 
text-align:center; 
 
position:relative; 
 
} 
 

 
.content:before { 
 
position:absolute; 
 
left:0; 
 
top:0; 
 
content:"{"; 
 
font-family: 'proxima-nova', sans-serif; 
 
    font-size: 15rem; 
 
    font-weight: 300; 
 

 
} 
 
.content:after { 
 
position:absolute; 
 
right:0; 
 
top:0; 
 
content:"}"; 
 
font-family: 'proxima-nova', sans-serif; 
 
    font-size: 15rem; 
 
    font-weight: 300; 
 

 
}

<div class="content"> 
 
<h1>Some text</h1> 
 
<h3>More text More text More text More text</h3> 
 
</div>

をここ

Answer 2

はフィドルです：https://jsfiddle.net/ur7pyxof/2/

<div class="col-md-4 col-md-offset-4"> 
    <div class="space margin-10"> 
    <div class="brackets"> 
     <h1> 
     <table> 
     <tr> 
     <td class="bracket-l">{</td> 
     <td> <h2 class="subhead align-center text-up size-1" id="title">HCM</h2> 
     <p class="description align-center size-1">Uniting Organizations with HR Solutions that Help Drive Revenue | ADP.com</p></td> 
     <td class="bracket-l">}</td> 
     </tr> 
     </table> 
     </h1> 
    </div> 
    </div>