Hi! I need to transfer the inscription "Personal touch" to the second line after the icon. Br does not help because it is a block element.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <base href="/"> <title>CompanyName</title> <meta name="description" content=""> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!-- Template Basic Images Start --> <meta property="og:image" content="path/to/image.jpg"> <link rel="icon" href="img/favicon/favicon.ico"> <link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon-180x180.png"> <!-- Template Basic Images End --> <!-- Custom Browsers Color Start --> <meta name="theme-color" content="#FFF"> <!-- Custom Browsers Color End --> <script defer src="libs/fontawesome-free-5.0.8/svg-with-js/js/fontawesome-all.min.js"></script> <link rel="stylesheet" href="css/main.min.css"> </head> <body> <div class="container-fluid"> <div class="row first-block align-items-center"> <p class="Companyname col-7"><span>company</span><span>name</span></p> <ul class="col-5 Top-menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="row first-block-2"> <p class="BigGrayText"> We're here to create your online presense and style </p> <p class="SmallGrayText"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis orci dapibus risus dignissim, viverra pellentesque arcu ullamcorper. Mauris a tincidunt lectus. Proin nec venenatis quam. <br> <button>start today with us</button> </p> </div> <div class="row second-block"> <p class="second-block-bigtext">Features you'll love</p> </div> <div class="row second-block-2"> <div class="col second-block-2-main"> <p class="second-block-2-icon"><i class="fas fa-user"></i></p> <p class="second-block-2-bigtext">Personal touch</p> <p class="second-block-2-smalltext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat purus in ferment uectetur tortor id, pharetra lorem. </p> </div> <div class="col"></div> <div class="col"></div> </div> </div> <script src="js/scripts.min.js"></script> </body> </html> Main.sass
@import "vars" @import "fonts" @import "libs" ul list-style: none .Companyname font-family: $PoiretOne color: $white font-size: 30px margin-top: 74px padding-left: 174px margin-bottom: 0px span:last-child color: #C9C9C6 font-size: 28px .first-block background-color: $bg-gray .Top-menu display: flex margin-top: 75px margin-bottom: 0px li margin-left: 15px a color: $white font-size: 13px font-family: $MontserratRegular text-decoration: none text-transform: uppercase &::after content: '' width: 100% height: 2px display: block background-color: $white transform: scale(0) transition: all 0.2s &:hover &::after transform: scale(1) .BigGrayText color: $white font-size: 50px margin-left: 172px margin-top: 196px font-family: $CabinRegular width: 640px .first-block-2 background-color: $bg-gray button background-color: $green width: 224px height: 56px outline: none border: none color: $white text-transform: uppercase font-family: $LatoBold font-size: 13px border-radius: 5px margin-top: 60px .SmallGrayText font-size: 15px width: 574px margin-left: 174px font-family: $LatoLight color: $white line-height: 32px margin-bottom: 272px .second-block background-color: $white &-bigtext font-family: $CabinRegular font-size: 48px width: 100% color: $very-dark text-align: center margin-top: 128px .second-block-2 // margin-left: 176px // margin-right: 176px &-icon font-size: 30px color: $white width: 65px height: 65px text-align: center background-color: $green border-radius: 50% line-height: 62px &-main display: flex justify-content: center flex-wrap: wrap width: 329px @import "media" 
.d-blockpossible - entithat