<div class="section" data-tag="div">
    <div class="section__icon" data-tag="div" data-hint="icon"></div>
    <div class="section__info" data-tag="div">
        <div class="section__title" data-tag="p" data-hint="title"></div>
        <div class="section__description" data-tag="p" data-hint="description"></div>
    </div>
    <div class="section__button" data-tag="button" data-hint="button"></div>
</div>

body {
    margin: 0;
    padding: 24px;
}

.section {
    gap: 16px;
    padding: 16px;
    display: grid;
    grid-template-columns: max-content 1fr max-content;
}

.section__icon {
    width: 48px;
    height: 48px;
}

.section__info {
    gap: 8px;
    display: grid;
    grid-auto-rows: max-content;
}

.section__title {
    max-width: 25%;
    height: 24px
}

.section__description {
    max-width: 70%;
    height: 16px;
}

.section__button {
    min-width: 180px;
}

[data-tag],
[data-hint] {
    position: relative;
    outline: 1px dashed var(--hint-color);
}

[data-tag] {
    --hint-color: #222222;
}

[data-tag]:hover {
    --hint-color: #2e47ab;
    
    outline: 1px solid var(--hint-color);
}

[data-tag]::before {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 4px;
    font-family: Consolas, monospace;
    font-size: 12px;
    line-height: 1;
    background: var(--hint-color);
    color: #ffffff;
    content: attr(data-tag);
}

[data-hint]::after {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: italic;
    line-height: 1;
    content: attr(data-hint);
}