How to add fixed placeholder text to an input box and prevent the user from deleting it on a web page?

Working on an ordering table for a new product and one of the columns is to specify the RAL color of the product.

I want to have fixed text that the user can't delete so all they have to do is enter a four digit number after that which relates to the RAL colour.

The problem I'm having is the input is going over the fixed text and not after it - see below.

Please ignore the design of the table as I'm working on the functionaility for now and its looking a bit rubbish.

HTML:

<td class="lst-input-ral-box">
     <input value="" id="ral" maxlength="4" autofocus="autofocus">
     <span class="ral-placeholder">RAL</span>
 </td>

CSS:

.lst-input-ral-box {
   position: relative; 
}
.input {
    display: block; 
    border: 1px solid #d7d6d6; 
    background: #fff;
    padding: 10px 10px 10px 20px;
    width: 195px;
}
.ral-placeholder {
    position: absolute; 
    display: block;
    left: 5px; 
    top: 3px; 
    z-index: 9;  
}

Any help on this would be greatly appreciated as I'm fairly new to 'complex' coding.

Don't put the static text inside the input, put it before the input. You can style it to "appear" to be inside the input by removing the border/outline/etc. from the input and adding it to the containing element. For example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.lst-input-ral-box {
  border: 1px solid #d7d6d6;
}
.lst-input-ral-box:focus-within {
  border: 1px solid #000;
}
input {
  border: none;
  outline: none;
}

<!-- language: lang-html -->

<table>
  <tr>
    <td class="lst-input-ral-box">
     <span class="ral-placeholder">RAL</span>
     <input value="" id="ral" maxlength="4" autofocus="autofocus">
   </td>
  </tr>
</table>

<!-- end snippet -->

Edit: For completeness, this can be further improved by changing the <span> to a <label>, which will focus the <input> when activated. I've also reduced the "gap" between the two contained elements, so the full clickable area should activate the <input>:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.lst-input-ral-box {
  border: 1px solid #d7d6d6;
  display: flex;
  gap: 0;
}
.lst-input-ral-box:focus-within {
  border: 1px solid #000;
}
input {
  border: none;
  outline: none;
}

<!-- language: lang-html -->

<table>
  <tr>
    <td class="lst-input-ral-box">
     <label for="ral" class="ral-placeholder">RAL</label>
     <input value="" id="ral" maxlength="4" autofocus="autofocus">
   </td>
  </tr>
</table>

<!-- end snippet -->

Note that a <label> for an <input> has an important semantic meaning. One should take accessibility into consideration here, as not all users will visually observe or care about this stylistic placement.

Does this element "label" the input? Semantically that's for you to decide. Combinations of aria- attributes and other functionality can also be used to achieve reasonable designs while keeping the markup semantically clear.

if I have well understood, you want to add 4 digits after the "RAL" constant right ?

Is so, you should replace

<input value="" id="ral" maxlength="4" autofocus="autofocus">
<span class="ral-placeholder">RAL</span>

with:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<label for="ral" class="ral-placeholder">RAL</label>
<input type="text" value="" id="ral" name="ral" maxlength="4" autofocus="autofocus">

<!-- end snippet -->

PS : you have to know that the name attribute is a good practice to use correctly in the for="" from <label> tag, even if id is working also.