<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <div class = "main"> <form> <input class = "search form-control input-lg" type = "text" name = "search" placeholder = "Search your contacts"><span><i class = "fa fa-search"></i></span> <span><span class = "side">+</span> <i class = "fa fa-ellipsis-v"></i></span> </form> <table class = "table"> <tr> <td> <img class = "photo" src = "https://s.hdnux.com/photos/51/23/24/10827008/3/920x920.jpg" alt = ""> </td> <td> <p class = "con1">Andrew Smith</p> <p class = "con1"> <i class = "fa fa-phone"></i>  <i class = "fa fa-comments"></i></p> </td> </tr> <tr> <td> <img class = "photo" src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmT0FivQvJM_ULsAABb4EvdTZ0DIIbC8N1Seec_p_Sa5SLYSKi" alt = ""> </td> <td> <p class = "con1">Barbara Stokes</p> <p class = "con1"> <i class = "fa fa-phone"></i>  <i class = "fa fa-comments"></i></p> </td> </tr> <tr> <td> <img class = "photo" src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9WTpy07WmMlKbo95DvdZPDM9UkV4A0Ma19s8MKh5ln-YZEata" alt = ""> </td> <td> <p class = "con1"><a href="https://bbbootstrap.com">Cool snippet</a></p> <p class = "con1"> <i class = "fa fa-phone"></i>  <i class = "fa fa-comments"></i></p> </td> </tr> </table> </div>

.main{ width: 30vw; height: 45vh; background-color: white; margin: auto; position: relative; top: 20vh; } body{ background-color: black; font-family: 'Roboto', sans-serif; } .fa-search{ position: relative; bottom: 3.7vw; left: 22vw; font-size: 1.5vw; cursor: pointer; } .search{ width: 25vw; border: none; border-bottom: 1px solid black; border-radius: 0; } .side{ font-size: 2.5vw; position: relative; bottom: 3.2vw; left: 24vw; color: #3f51b5 ; cursor: pointer; } .fa-ellipsis-v{ font-size: 1.5vw; position: relative; bottom: 3.5vw; left: 25vw; color: #3f51b5; cursor: pointer; } .photo{ height: 4vw; width: 4vw; border-radius: 2vw; } .con1{ position: relative; right: 4vw; } tr{ border: 2px solid white; } .table{ position: relative; bottom: 4vw; } .fa-phone, .fa-comments{ font-size: 1.5vw; color: #3f51b5; } @media only screen and (max-width: 425px){ .main{ width: 100vw; height: 120vw; } .search{ width: 75vw; } .search::placeholder{ font-size: 5vw; } .fa-ellipsis-v{ font-size: 7vw; position: relative; top: -13vw; left: 78vw; } .side{ font-size: 9vw; position: relative; top: -13vw; left: 75vw; } .fa-search{ font-size: 6vw; position: relative; top: -14vw; left: 63vw; } .photo{ width: 14vw; height: 14vw; border-radius: 7vw; } .fa-phone, .fa-comments{ font-size: 4.5vw; } }