html - 在 div 中显示各种项目

Question

我已经在 figma 中为我的课程登陆页面进行了设计。

我的问题在于模块设计。

该设计：

我制作的html是这样的：

<div class="modules">
                <div>
                    <p>Módulo 1</p>
                    <div class="spacer"></div> 
                    <p>Enquadramento operacional da cibersegurança</p>
                </div>
                <div>
                    <p>Módulo 2</p>
                    <div class="spacer"></div> 
                    <p>Fundamentos de cibersegurança</p>
                </div>
                <div>
                    <p>Módulo 3</p>
                    <div class="spacer"></div> 
                    <p>Introdução à programação aplicada à cibersegurança</p>
                </div>
                <div>
                    <p>Módulo 4</p>
                    <div class="spacer"></div> 
                    <p>Hardware e redes de computadores</p>
                </div>
                <div>
                    <p>Módulo 5</p>
                    <div class="spacer"></div> 
                    <p>Introdução às técnicas de análise de evidências</p>
                </div>
                <div>
                    <p>Módulo 6</p>
                    <div class="spacer"></div> 
                    <p>Análise de vulnerabilidades – iniciação</p>
                </div>
                <div>
                    <p>Módulo 7</p>
                    <div class="spacer"></div> 
                    <p>Cibersegurança ativa</p>
                </div>
                <div class="spacer-middle"></div>
                <div class="hours-text">
                    <p>= 320H</p>
                    <p>Duração da Formação</p>
                </div>
            </div>

我也做了css，但结果是这样的：

有人可以帮助我处理所需的 css 或 html 案例，以制作第一张图片的精确副本吗？

谢谢你。

标签： htmlcssalignment