html - How to make some things not wrap in responsive form? -

I am trying to create a responsive form where there are some things to wrap and not others.

I would like it to appear on the desktop

When I try to do this, it still wraps the icon:

So, how can I have the icon of my own element (period or div), even then did not wrap down the text area?

Here's an attempt:

And here's a Bootstrap 3 attempt: I would really like to use bootstrap.

Here's some HTML:

  & lt; Div text-element class = "form-group row" & gt; & Lt; Label = "first name" class = "col-md-2 control-label" & gt; First name & lt; / Label & gt; & Lt; Div class = "col-md-5" & gt; & Lt; Input type = "text" class = "form-control" id = "first name" /> & Lt; / Div & gt; & Lt; Div class = "col-md-1 verification mark required" & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-3 verification message" & gt; Required for communication & lt; / Div & gt; & Lt; / Div & gt;  

You can stack without col-xx-xx The default style of overriding bootstrap is

  & lt; Div class = "container" & gt; & Lt; Form class = "form-horizontal" role = "form" & gt; & Lt; Div text-element class = "form-group line" & gt; & Lt; Label = "first name" class = "col-md-2 col-sm-2 col-xs-12 control-label" & gt; First name & lt; / Label & gt; & Lt; Div square = "col-md-5 col-sm-5 col-xs-9" & gt; & Lt; Input type = "text" class = "form-control" id = "first name" /> & Lt; / Div & gt; & Lt; Div class = "col-md-1 col-sm-1 col-xs-1 verification mark required" & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-3 col-sm-12 col-xs-12 verification message" & gt; Required for communication & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Form & gt; & Lt; / Div & gt;