html - alignment issue inside div -

I am facing problem while aligning element inside the div.

I need something like this

  | ----------------------------------------------- | | & Lt; P & gt; | & Lt; Input type = text & gt; | Image Button Here | | Here | Here | | | ----------------------------------------------- |   
 But something like this is happening to me  
  | ---------------------- ------------------------- | | & Lt; P & gt; | | | Here | | | & Lt; Input type = text & gt; | | | Here | | | Image Button Here | | ----------------------------------------------- |   
 Then there is some issue which is making the next element in  div  to display under the current element, i.e. if i   horizontally  & lt; P & gt; , I think the solution will be.  
 Below is my attempt:  
 CSS part  
  .imagewrapper {display: table-cell; Background color: yellow; Margin-left: 70%; Width: 25%; Margin-down: 10%; Height: 35%; } .textwrapper {display: table-cell; Background color: blue; Margin-left: 30%; Width: 40%; Margin-down: 10%; Height: 35%; } .msg_wrapper {display: table-cell; Background color: lime; Margin-left: 5%; Width: 25%; Margin-down: 10%; }   
 html side  
  & lt; Div id = "searchclass" & gt; & Lt; P class = "msg_wrapper" & gt; & Lt; B & gt; Classroom & lt; / B & gt; & Lt; / P & gt; & Lt; Input id = "txt_class" style = "background-color: aqua; class = textwrapper"; input type = "image" id = "searchclassimg" class = "imagewrapper" src = "./source/search-button .png" & Gt; & lt; / div & gt;    
 
 
 Try this HTML: < / P> 
  
 
 class = "msg_wrapper">  orbit  & gt; & lt; Lt; / p & gt; & lt; Input style = "Background color: aqua; Width: 25%; Swim left; Margin: 0 0 0 1%; Input type = "image" id = "searchclassimg" class = "imagewrapper" src = "./source/search-button.png"> class = textwrapper "id =" txt_class "& gt; & lt; / div & Gt;   
 or the CSs code below:  
  & gt; style & gt; .imagewrapper {display: table-cell; background-color: Yellow; margin-left: 1% width: 25%; margin-bottom: 10%; height: 35%;} .textwholesale {display: table-cell; background-color: blue; margin-left: 30% width: 40 % Margin-bottom: 10%; height: 35%; float: left;}. MMSG usage {display: table-cell; page Gray color: Lime; Margin-left: 5%; Width: 25%; Margin-bottom: 10%; Float: left;}     < / Html>