div {
display: flex;
flex-direction: row;
flex:1;
justify-content: center;
align-items: center;
}
img{
margin: 10px 0;
}
<div>
<section>
<h1>Titulo 1</h1>
<p> alguem paragrafo de descrição 1 </p>
<ol>
<li> item 1</li>
<li> item 2</li>
<li> item 3</li>
</ol>
</section>
<img src="https://i.pinimg.com/236x/ae/6f/0c/ae6f0c06031ec9671943bd8be104955f.jpg" width="300px">
</div>
<div>
<section>
<h1>Titulo 2</h1>
<p> alguem paragrafo de descrição 2 </p>
<ol>
<li> aaa </li>
<li> aaa </li>
<li> aaa </li>
</ol>
</section>
<img src="https://www.mentebinaria.com.br/uploads/monthly_2018_02/large.enduser.jpeg.bba8c1fc675d79f4498627eef97fef92.jpeg" width="300px">
</div>
<div>
<section>
<h1>Titulo 3</h1>
<p> alguem paragrafo de descrição 3 </p>
<ol>
<li> ronaldo </li>
<li> romero brito </li>
<li> kugo stozo </li>
</ol>
</section>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR21uPpWezBvq5pq8wBWN3led17DmF0YTIKsUraGaxbaFyUah8d" width="300px">
</div>
<div>
<section>
<h1>Titulo 4</h1>
<p> alguem paragrafo de descrição 4 </p>
<ol>
<li> amarelo </li>
<li> azul </li>
<li> vermelho </li>
</ol>
</section>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3B6n6DyBqzVZeKgMgceAkL7aoosSLgI6NYG4djCFjKSnxJRWlBA" width="300px">
</div>
primeiramente me desculpe a pergunta de newbie mas eu realmente nao encontrei uma resposta satisfatoria no sr. google.
então, tenho um trecho de codigo que tem 4 divs que seguem o mesmo padrão, mas com conteúdo diferente, como reutilizar esse mesma estrutura e adcionar mais 4 divs,sem usar um (ctrl c ctrl v), o objetivo aqui e diminui a quantidades de linhas no arquivo html.
<template>
+json
= 👍. Qualquer coisa posso postar um exemplo baseado na estrutura postada.