how to make text followed by a rectangle box filled with color html css with responsive

Question

I need a small help regarding simple html and css inside a grid.

like to attach a image which i actually want to achieve

 #rectangle { width: 100%; height: 40px; background: #8DB23F; } 

 <div class="row"> <div class="col-md-12" id="rectangle"><span id="first" style="background-color:white;color:#8DB23F;font-size:40px;padding:7px 0px 2px 1px;border-color:white;margin-left: -15px;"><strong>&nbsp;&nbsp;&nbsp;JAW CRUSHER&nbsp;</strong></span></div> </div> 

I have achieved this as time arround please help me fix this issue (not responsive)

Answer 1

This a suggestion and it will work on plane background color and single line text. Just make a try.

 .row { width: 100%; height: 40px; background: #8DB23F; } .row strong{ line-height: 40px; background: white; display: inline-block; } 

 <div class="row"> <strong>&nbsp;&nbsp;&nbsp;JAW CRUSHER&nbsp;</strong> </div> 

Answer 2

 #rectangle { width: 100%; display:block; height:40px; background-color: red; } strong { background-color: #fFF; } p { flex: 1 0 auto; margin-right:10px; font-size:30px; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-md-12" style="display:flex;align-items: baseline;"> <p ><strong> JAW CRUSHER </strong></p> <div id="rectangle"></div> </div> </div> 

Answer 3

i think this will help you achieve the required design

<div class="row">
   <div class="col-md-12" id="rectangle"><span id="first"><strong>&nbsp;&nbsp;&nbsp;JAW CRUSHER&nbsp;</strong></span></div>
</div>
<style>
#rectangle{
     width:100%;
     height:auto;
     background:#8DB23F;
     }
 #first{
 background-color:white;
 color:#8DB23F;
 font-size:40px;
 padding:7px 0px 2px 1px;
 border-color:white;
 margin-left: -15px;
 }
 @media screen and (max-width: 480px) {
    #first {
    font-size:20px;
    }
}
</style>

Answer 4

 #Box { width: 100%; height: auto; background: #8DB23F; } #name { background-color: white; color: #8DB23F; font-size: 40px; padding: 10px 0px 3px 3px; border-color: white; margin-left: -15px; } @media screen and (max-width: 480px) { #Box { height: 100%; } #name { font-size: 37px; } } 

 <div class="row"> <div class="col-md-12" id="Box"><span id="name"><strong>&nbsp;&nbsp;&nbsp;JAW CRUSHER&nbsp;</strong></span></div> </div>