Для выравнивания элементов в одну строку можно использовать CSS свойство display: flex; на контейнере, в котором находятся элементы. Это позволит автоматически выровнять элементы в строку или колонку в зависимости от заданных параметров.
Чтобы реплицировать дизайн, изображенный на втором скриншоте, необходимо создать элементы с нужным содержимым (картинки, текст и т. д.) и стилизовать их с помощью CSS. Для создания такого расклада можно использовать flexbox или grid layout для более сложных структур. Также следует учитывать адаптивность дизайна для различных устройств.