JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
  Create a Community
</h1>

<h2>Community Name</h2>
<div class="field">
  <span class="inputline" tabindex="0">
    <span id="matrix-community-name"
          data-ph="My Matrix Community"
          contenteditable="true"
          ></span>
  </span>
  <label>
    Your community name is how people will know your community - it should be as descriptive as possible to help people know what your community is all about.
  </label>
  <label>
    Remember: your community name is <em>not</em> unique across Matrix.
  </label>
</div>

<h2>Community ID</h2>
<div class="field community-id">
  <span class="inputline" tabindex="1">
    <span class="sugar left">+</span>
    <span id="matrix-community-id"
          contenteditable="true"
          style="text-transform:lowercase" 
          data-ph="my-matrix-community"></span>
    <span class="sugar right">:matrix.org</span>
  </span>
  <label>
    Your community ID is a unique identifier; people will see it when you invite them to your community. Try to choose something that is easy to read and clearly represents your community.
  </label>
  <label id="caps-warning">
    Matrix community IDs are <em>lowercase only</em>; words should be <em>separated-with-dashes</em>.
  </label>
</div>

CSS

body {
  font-family: Sans-serif;
  margin: 20px;
  background: white;
  color: rgb(69, 69, 69);
}

h2 {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 10px;
}

.field {
  margin-left: 10px;
}

.inputline {
  border: 1px solid lightgrey;
  border-radius: 2px;
  padding: 0px;
  display: inline-flex;
  font-size: 16px;
  max-width: 600px;
}

.inputline:focus-within {
  box-shadow: 0 0 3pt 2pt lightblue;
  border: 1px solid #0095ff;
}

.inputline [contenteditable=true] {
  min-width: 160px;
  padding: 8px;
}

.inputline [contenteditable=true]:focus {
  outline: inherit;
}

.inputline [contentEditable=true]:empty:not(:focus)::before{
  content:attr(data-ph);
  color: gray;
}

.inputline .sugar {
  padding: 8px;
  background: whitesmoke;
}

.field .community-id .sugar .right {
  padding-left: 6px;
  padding-right: 6px;
}

.field label {
  padding-top: 10px;
  font-size: 13px;
  display: block;
  max-width: 600px;
}

.field label em {
  font-weight: 600;
  font-style: inherit;
}




input:focus {
  outline: inherit;
}

#caps_warning {
  font-size: 13px;
}

JavaScript

$('#matrix-community-name').keyup(function() {
    if(manuallyEdited == false) {
        var idSafeName = $('#matrix-community-name').text()
                                                    .toLowerCase()
                                                    .replace(/\W+/g, '-');
        $('#matrix-community-id').text(idSafeName);
		}
});

var manuallyEdited = false;

$('#matrix-community-id').on('paste', function() {manuallyEdited = true;})

$('#matrix-community-id').keydown(function(key) {
    manuallyEdited = true;
    if (key.key.length == 1 && 
        (key.key != key.key.toLowerCase() || key.key == ' ') &&
        !$('#caps-warning').is(':animated')) {
        $('#caps-warning').effect('shake', {distance: 10});
        if(key.key == ' ') return false;
    }
});

function selectElementContents(el) {
    var range = document.createRange();
    range.selectNodeContents(el);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}

$('#matrix-community-id').focus(function() {
    console.log('welo');
		if (!manuallyEdited) {
    		selectElementContents($('#matrix-community-id')[0]);
    }
});

$('#matrix-community-id').blur(function() {
		if ($('#matrix-community-id').text() == '') {
    		manuallyEdited = false;
    }
});