How to have text in between form inputs

Question

I'm trying to make a form with various inputs and between these inputs I want text. Here's what it should look like:

I have had no problem putting the text underneath, but simultaneously having text that goes between each input has been hard. Originally I tried to do it as a series of textareas inside of a div, but that made the text underneath work improperly. Any idea how I can do both? Here's what it currently looks like:

And here's the code I have for it:

React:

<form>
                                    <div id="form_fields_div">
                                        <fieldset>
                                            <input type="text" name="text_box_number_1_page_6" id="text_box_number_1_page_6" />
                                            <label for="text_box_number_1_page_6">(a feeling you don’t like) </label>
                                        </fieldset>
                                        <h2>. I do</h2>
                                    
                                    
                                        <fieldset>
                                            <input type="text" name="text_box_number_2_page_6" id="text_box_number_2_page_6" />
                                            <label for="text_box_number_2_page_6">(an activity that makes you feel better)</label>
                                        </fieldset>
                                        <h2>to make me feel less</h2>
                                    
                                    
                                        <fieldset>
                                            <input type="text" name="text_box_number_3_page_6" id="text_box_number_3_page_6" />
                                            <label for="text_box_number_3_page_6">(the feeling you don’t like)</label>
                                        </fieldset>
                                        <h2>That means that</h2>
                                    
                                
                                        <fieldset>
                                            <input type="text" name="text_box_number_3_page_6" id="text_box_number_3_page_6" />
                                            <label for="text_box_number_3_page_6">(the activity that makes you feel better)</label>
                                        </fieldset>
                                        <h2>is a coping strategy.</h2>
                                    </div>
                                </form> 

and css:

form {
    width: 89.5em;
    overflow: hidden;
    
    border: none;
    
  }
   fieldset {
    display: block;
    float: left;
    width: 10em;
    margin: 0 1em 0 0;
    border: none;
    
  }
    fieldset:last-child {
    margin: 0;
  }
  
  fieldset > input,
  fieldset > label {
    display: block;
    text-align: center;
    margin: 0 auto;
    font-size: 15px;
  }
  fieldset > input {
    width: 80%;
    font-size: 25px;
  }

  #form_fields_div {
      display: inline;
      white-space: nowrap;
  } 

Answer 1

Here's the code I used:

JS File:

import '../extcss.scss';

<form>
    <div className="extcss" id="form_fields_div">
        <p>For example, sometimes I do feel<br/><br/></p>
        <span className="inline-flex flex-col">
            <input
                onChange={event => this.handleChange(event)}
                defaultValue={this.getValue("text_box_number_1_page_6_sheet_4")}
                className="border-b border-black text_box_inputs"
                type="text"
                name="text_box_number_1_page_6_sheet_4"
                id="text_box_number_1_page_6_sheet_4"
            />
            <label for="text_box_number_1_page_6_sheet_4">(a feeling you don't like)</label>
        </span>
        <span className='side_text'>. I do&nbsp;&nbsp;</span>
        <span className="inline-flex flex-col">
            <input
                onChange={event => this.handleChange(event)}
                defaultValue={this.getValue("text_box_number_2_page_6_sheet_4")}
                className="border-b border-black text_box_inputs"
                type="text"
                name="text_box_number_2_page_6_sheet_4"
                id="text_box_number_2_page_6_sheet_4"
            />
            <label for="text_box_number_2_page_6_sheet_4">(an activity that makes you feel better)</label>
        </span>

        <span className='side_text'>&nbsp;&nbsp;to make me feel less&nbsp;&nbsp;</span>

        <span className="inline-flex flex-col">
        <input
            onChange={event => this.handleChange(event)}
            defaultValue={this.getValue("text_box_number_3_page_6_sheet_4")}
            className="border-b border-black text_box_inputs"
            type="text"
            name="text_box_number_3_page_6_sheet_4"
            id="text_box_number_3_page_6_sheet_4"
        />
        <label for="text_box_number_3_page_6_sheet_4"
            >(the feeling you don't like)</label
        >
        </span>
        <span className='side_text'>&nbsp;&nbsp;That means that&nbsp;&nbsp;</span>

        <span className="inline-flex flex-col">
        <input
            onChange={event => this.handleChange(event)}
            defaultValue={this.getValue("text_box_number_4_page_6_sheet_4")}
            className="border-b border-black text_box_inputs"
            type="text"
            name="text_box_number_4_page_6_sheet_4"
            id="text_box_number_4_page_6_sheet_4"
        />
        <label for="text_box_number_4_page_6_sheet_4"
            >(the activity that makes you feel better)</label
        >
        </span>
        <span className='side_text'>&nbsp;&nbsp;is a coping strategy.</span>
    </div>
</form>

extcss.scss:

.extcss{
  /* Code from external css file copied here */
}

Answer 2

You can create form item wrapped by span tag with display inline-flex and direction column to display the label under the input

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <link
      rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"
    />
  </head>
  <body>
    <form>
      <div id="form_fields_div">
        For example, sometimes I do feel
        <span class="inline-flex flex-col">
          <input
            class="border-b border-black"
            type="text"
            name="text_box_number_1_page_6"
            id="text_box_number_1_page_6"
          />
          <label for="id1">(a feeling you don’t like)</label>
        </span>
        <span>. I do</span>
        <span class="inline-flex flex-col">
          <input
            class="border-b border-black"
            type="text"
            name="text_box_number_2_page_6"
            id="text_box_number_2_page_6"
          />
          <label for="id1">(an activity that makes you feel better)</label>
        </span>

        <span>to make me feel less</span>

        <span class="inline-flex flex-col">
          <input
            class="border-b border-black"
            type="text"
            name="text_box_number_3_page_6"
            id="text_box_number_3_page_6"
          />
          <label for="text_box_number_3_page_6"
            >(the feeling you don’t like)</label
          >
        </span>
        <span>That means that</span>

        <span class="inline-flex flex-col">
          <input
            class="border-b border-black"
            type="text"
            name="text_box_number_3_page_6"
            id="text_box_number_3_page_6"
          />
          <label for="text_box_number_3_page_6"
            >(the activity that makes you feel better)</label
          >
        </span>
        <span>is a coping strategy.</span>
      </div>
    </form>
  </body>
</html>