How to fix width to my Div tag? It is overflowing and merging with my right panel

I have a div tag and in side that div tag there are 2 span tags. one span tag will hold up to maximum of 10 span tags and i restrict that programtically. the second span will hold a text box and a button. when ever i enter some text in the text box i am showing it in the first span. now th开发者_如何学Pythonat I am facing some problems to get the span tag to the next line instead its getting over lapped with the right panel.

can some one please help me with this..

Note: My div or span has no CSS as of now.

<div>
     <span>
           <span>Sample text</span>
           <span>Sample text</span>
           <span>Sample text</span>
           <span>Sample text</span>
     </span>
     <span><input type="text"><input type="button"></span>
</div>

The span tag is used to group inline-elements on a document, thus they are not block-level by nature. Just set the span tags to display as inline-block and that should fix the problem.

CSS

span {
  display:inline-block;
}

Also, if you're looking to displace the span tags so they can hold a line each as block elements do just set them to display:block;, but if thats the case it would be cleaner to just set them as div's instead of span's.