'Python Flask: Email address to the right of a flask form input box

I have a really simple problem that I'm able to figure out with basic html templating, but I can't seem to figure with wtforms using bootstrap. Here's the code that works in html and I'm trying to replicate with wtforms:

<h1>Input Email Address</h1>
    <br>
    <form method="post">
      <div class="mb-3">
        <input class="" type="text" name="title"
               placeholder="ex: student1234"
               size="30"
               value="{{ request.form['title'] }}"></input>
        <label>@myschool.org</label>
        <br>
        <br>
        <button class="btn btn-primary" type="submit">Submit</button>
      </div>
    </form>

This displays the email address directly to the right of the input box. This is intentional, since we have users (students) who will be using this and we want them to only need to put in the email without the @myschool.org. There's a long story as to why, but it's really just to encourage them to actually use it, so we want to make it easy for them.

Below is the flask wtforms code that looks amazing, but I can only seem to get the text box to display above or below, and not to the left or right.

<div class="row">
  <div class="col-md-6">
    {{ wtf.form_field(form.name) }}
  </div>
  <div class="col-md-6">
    <p>@myschool.org</p>
    <br>
    <p>@myschool.org</p>
  </div>
  </div>

The '@myschool.org'

tags are my attempt at trying different things. There's got to be a way to accomplish this using jinja, css, or bootstrap, I would think.

Another solution would be to prefill the input box with the @myschool.org, similar to the chromebook login window, but I haven't been able to figure that out either.

I hope that all makes sense, still fairly new to flask and web development. Thanks in advance.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source