JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <h1>Título del artículo</h1>
</header>

<div class="texto">
    Lorem ipsum dolor sit amed.
</div>

</article>

<div class="ruler" style="width:176px;">176px</div>

CSS

article {
    border: 1px solid #aaaaaa;
    width: 218px; /* + border = 220 */
    margin: 0 auto;
}

header {
    width: 198px;
    padding: 0 10px;
    background-color: #aaaaaa;
    overflow: hidden;
}

.texto {
    border: 1px dashed black;
    margin: 10px;
    padding: 10px;
    width: 176px; /* + border + padding + margin = 218 */ 
    background-color: #dddddd;
}

.ruler {
    background-color: black;
    color: white;
    text-align: center;
    margin: 1em auto;
}