段落中间的 div/input

Question

I am trying to align a div containing an input in the middle of a paragraph. Seeing as a div cannot be contained by a paragraph in a valid way, I need to make all three elements align inline-block.

The first paragraph is relatively small, the div is around 350px, the last paragraph is really long. Its that last paragraph that gives my a problem as it won't automatically word-wrap when the text reaches the end of the page - instead the entire paragraph wraps to a new line.

 <p style="display:inline-block">Blah Blah Blah Text Goes Here:</p> <div style="display:inline-block width:350px;"><input name="blah" value="123456yg323456y23456yr345yr3456tr3454345"></div> <p style="display:inline-block">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>

The output I am getting looks like this:

Blah Blah Blah Text Goes Here: <-------------div input goes here ------------->

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 

I am looking for output that looks like this:

Blah Blah Blah Text Goes Here: <-------------div input goes here -------------> blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah

Removing the input from the div is not an option.

How can I properly get the desired output in a responsive manner?

Answer 1

Try display: inline

 <p style="display:inline">Blah Blah Blah Text Goes Here:</p> <div style="display:inline; width:350px;"><input name="blah" value="123456yg323456y23456yr345yr3456tr3454345"></div> <p style="display:inline">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>