title: Make h4 tag line break at beginning of new line
body: <p>I have a for each loop that puts input fields between h4 tags, but when I open the web page on my phone I saw that the text had a line break that looked kind of strange. <a href="https://i.stack.imgur.com/9S4nb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9S4nb.png" alt="Strange text"></a></p>
  
  <p>I want the text to display as 'The [text input] scenes were cut from the film.' in a way that is easy to read. To do this the text input field needs to remain the height of one row of text and wherever the line break happens, it should start underneath 'The'. I've searched for a lot of solutions and until now I haven't found any solution.</p>
  
  <p>Is this something that can be fixed with just some easy CSS or does it also require me to do some JS?</p>
  
  <pre><code>&lt;form action="" method="post" id="answers" class="card-title"&gt;
  &lt;h4&gt;The &lt;/h4&gt;
  &lt;input class="form-control answer_input" autocomplete="off" id="answer_1" style="min-width:40px; width: 100px; max-width300pheight:30px; margin-left: 10px; margin-right: 10px;" autofocus="" type="text"&gt;
  &lt;h4&gt; scenes were cut from the film. (horrify)&lt;/h4&gt;
  </code></pre>
  
  <p></p>
  
  <p>This is the current code for the screenshot you see above. It has some CSS added that makes it a flex row.</p>
  
  <p>This is the blade code to show the form</p>
  
  <pre><code>&lt;?php  $i=0; $answers = explode('|', $question-&gt;correct_answer); ?&gt;
            &lt;form action="" method="post" id="answers" class="card-title"&gt;
                    &lt;?php $sections = explode('___', $question-&gt;question);  $c = 0; $answers_processed = 0; ?&gt;
                    @foreach($sections as $section)
                            &lt;h4&gt;{{$section}}&lt;/h4&gt;
                            &lt;?php $c = $c + 1; $i = $i +1;?&gt;
                            @if($i &lt; 3 &amp;&amp; $answers_processed !== count($answers))
                                &lt;input class="form-control answer_input" autocomplete="off" id="answer_{{$i}}" style="min-width:40px; width: {{strlen($answers[$i - 1]) * 10}}px; max-width300pheight:30px; margin-left: 10px; margin-right: 10px;" type="text" autofocus&gt;
                            @endif
                            &lt;?php $answers_processed = $answers_processed + 1; ?&gt;
                    @endforeach
            &lt;/form&gt;
  </code></pre>
  
  <p>Hope someone can help. Thanks.</p>