Like this? The ::before pseudo element can be styled. It's not "positioning the text at the end of the <div>" since the text is still contained in the <div>, but it does get you the colored square before the text with no additional (explicit) elements in the markup.

div::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--color);    
}

<div style="--color:red">AB</div>  
<div style="--color:green">CD</div>
<div style="--color:blue">EF</div>

You can try out something with the pseudo-elements (:before or :after). In my example changing the padding-left: 15px; inside div you can control the space between the boxes and text, and by changing bottom: 4px; inside the div:before you can align them in the middle of text

div {
  position: relative;
  padding-left: 15px;  
}

div:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 4px;
  width: 10px;
  height: 10px;
  background: var(--color); 
}

<div style="--color:red">AB</div>  
<div style="--color:green">CD</div>
<div style="--color:blue">EF</div>