html - when adding a tag to div element, margin becomes 1/2 of parent div -

I am trying to align a line - icon | Text | - icon | Text | - icon | Text | It seems ok when the div is next to each and they seem to align properly as well. But when I add a

tag between child div, it actually behaves weird and sets its margin in 1/2 of the parent div.

This looks like my HTML:

    
 And it looks like CSS:  
  #subber {height: 10%; Width: 100%; } .subber-element {height: 100%; Display: Inline-block; Border: 1 px black solid; Width: 30%; } .subber-element p {font-family: vegur regular; Color: Gray; Display: Inline; Margin: 0; Padding: 0; } .subber-element-icon {height: 100%; Width: 10%; Border: 1 px black solid; Display: Inline-block; }   
 Hope one of you guys can help!   
 
 
 I will also post here with the solution  
 HTML  
  & lt; Div id = "subber" & gt; & Lt; Img class = "icon" & gt; & Lt; / Img & gt; & Lt; Section class = "text" & gt; & Lt; P & gt; PROVA PROVA provova congress del testo & lt; / P & gt; & Lt; / Section & gt; & Lt; / Div & gt; & Lt; Div id = "subber" & gt; & Lt; Div class = "icon" & gt; & Lt; / Div & gt; & Lt; Section class = "text" & gt; & Lt; P & gt; & Lt; Span & gt; Prova prova prova cone del testo testo & lt; / Span & gt; & Lt; / P & gt; & Lt; / Section & gt; & Lt; / Div & gt; & Lt; Div id = "subber" & gt; & Lt; Div class = "icon" & gt; & Lt; / Div & gt; & Lt; Section class = "text" & gt; & Lt; P & gt; Prova prova prova cone del testo testo & lt; / P & gt; & Lt; / Section & gt; & Lt; / Div & gt;   
 css  
  .inon {height: 50px; Width: 50px; Limit: 1px solid black; Swim left; } .text {border: 1px solid black; Swim left; Height: 50px; Max-width: 300px; Red color; } .textp {height: 50px; Padding: 0px; } # Subber {float: left; Width: 400px; Height: 50px; }