JSFiddle - React, Tailwind, and code Playground

HTML

<h2 id="readonly">
  Read-only
</h2>
<form class="form-horizontal" role="form" method="get" action="#">
  <div class="form-group">
    <label for="emailReadonly" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control rn-full-width-tablet form-control-plaintext" readonly="readonly" id="emailReadonly" value="email@example.com" />
    </div>
  </div>
</form>

<h2 id="label">
  Label plaintext
</h2>
<form class="form-horizontal" role="form" method="get" action="#">
  <div class="form-group">
    <span class="field-name col-sm-4 control-label pddn-tp-0" id="plaintext-email"><strong>Email</strong></span>
    <span class="col-sm-8 form-control-plaintext" role="textbox" aria-readonly="true" aria-labelledby="plaintext-email" tabindex="0">
      email@example.com
    </span>
  </div>
</form>

CSS

.form-control-plaintext {border:none !important;width:100% !important;height:auto !important;box-shadow:none !important;cursor:default !important;background:transparent !important;resize:none !important;overflow:hidden !important}

span[role="textbox"].form-control-plaintext:focus, span[role="textbox"].form-control-plaintext {width:-moz-fit-content !important;width:-webkit-fit-content !important;width:-ms-fit-content !important;width:-o-fit-content !important;width:fit-content !important}

span[role="textbox"]:focus {border:2px solid #A6C7FF !important;border-radius:0 !important;outline:0 !important}

span[role="textbox"].form-control-plaintext:focus {margin:-2px 0 0 -2px}

span[role="textbox"]{display:block}

label{font-weight:bold}