Eu usei a ferramenta Jeykll para gerar conteúdo de marcação para baixo em HTMl.

Desejo agrupar os elementos abaixo da marca abaixo no elemento div ou em qualquer outra tag HTML personalizada.

Marcado para baixo

 #Multiple Axis
    {:.title}
    Different types of data can be visualized in a single chart with the help of 
    {: .description}
    It can be used when we need to compare the trends of different kinds of data.
    {: .description}

Saída HTML

  <h1 id="multiple-axis" class="title">Multiple Axis</h1>
    <p class="description">Different typ`enter code here`es of data can be visualized in a single chart with the help of</p>
    <p class="description">It can be used when we need to compare the trends of different kinds of data.</p>

Como agrupar a remarcação acima no elemento Div ou em qualquer tag personalizada como esta

<div class="">    
     <h1 id="multiple-axis" class="title">Multiple Axis</h1>
        <p class="description">Different types of data can be visualized in a single chart with the help of</p>
        <p class="description">It can be used when we need to compare the trends of different kinds of data.</p>       
    </div>