css columns ，正确的实现方式？

Question

I wanted to implement the design below , but I am having trouble on the positions , can anyone give a basic css example and implementation of the sample image below ? Help would really be appreciated. Thank you. are we going to use col for that ? how do we seperate text based on the design ?

Answer 1

Really simple example using bootstrap :

 .col { background-color: red; } #icon { background-color: green; } hr { border-top-width: 3px !important; } .arrow-up { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid black; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <div class="row"> <div class="col m-2"> <div class="row"> <div id="icon" class="col-4"> ICON </div> <div class="col-8"> <h3> Unmuted <span class="arrow-up"></span> </h3> <hr> <p> Panacast </p> </div> </div> </div> <div class="col m-2"> <div class="row"> <div id="icon" class="col-4"> ICON </div> <div class="col-8"> <h3> Unmuted <span class="arrow-up"></span> </h3> <hr> <p> Panacast </p> </div> </div> </div> </div>