Search code examples
htmlcssstyles

how can I align a button with text area?

I want to align my button horizontally with text area,like this image this

Currrent code:

<div class="container">
   <div class='row'>
    <div  class="col-sm-1">
<img style="border-radius:50%;width:70px;height:70px;" src="https://images.discordapp.net/avatars/<%=user.id%>/<%=user.avatar%>.png?size=512">      
     </div>
     <div  class="col-sm-11">
     <textarea style='width:70%;height:100%' placeholder='Leave a review for this shop'></textarea>
     </div>
     <div  style="margin-top:5px;margin-bottom:5px;width:70%;display: flex;justify-content: space-between">
       <div>
         <span class="review" data-rating="0"></span>
         <br>
         Please make sure to check our review guidelines before posting.
       </div> 
       <button class="button_div" style="width:auto;display:block;margin-left:  auto;margin-right: 0;" >Post Review</button>
     </div>
  </div>
  </div>

Solution

  • The total screen size is 12. you gave the image col-sm-1, and you gave the textfield col-sm-11 that takes up the entire column, you have to reduce col-sm-11 for the textfield to something else so that the preview bottom can fit. Or You can add the preview button into the same div as the textfield.