Return to Answer

$prepared = [];
$max = 0;
foreach ($assoc as $columnName => $number) {
    $rawLength = strlen($columnName . $number);
    $max = max($max, $rawLength);
    $prepared[htmlentities($columnName)] = [
        'asDecimal' => (float) str_replace(',', '.', $number),  // declared as first element for sorting
        'length' => $rawLength,
        'value' => $number,
    ];
    
}
asort($prepared);

dataType: "json",
success: function(data) {
    data = {...{"":"Επιλέξτε τύπο πλωτού", ...data}};  // prepend your static property to the incoming object
    jQuery.each(data, function (encodedName, subdata) {
        jQuery('#ff_elem9589').append(
            '<option value="' + encodedName + '">'
            + encodedName + subdata.glue + subdata.value
            + '</option>'
        );
    });
}

$filtered = array_filter(
    $assoc,
    function($v) {
        return $v && $v != '0,00';
    }
);
$prepared = [];
$max = 0;
foreach ($filtered as $columnName => $number) {
    $rawLength = strlen($columnName . $number);
    $max = max($max, $rawLength);
    $prepared[htmlentities($columnName)] = [
        'asDecimal' => (float) str_replace(',', '.', $number),  // declared as first element for sorting
        'length' => $rawLength,
        'value' => $number,
    ];
    
}
asort($prepared);

dataType: "json",
success: function(data) {
    data = {...{"":{glue: "", value:"Επιλέξτε τύπο πλωτού"}, ...data}};  // prepend your static property to the incoming object
    jQuery.each(data, function (encodedName, subdata) {
        jQuery('#ff_elem9589').append(
            '<option value="' + encodedName + '">'
            + encodedName + subdata.glue + subdata.value
            + '</option>'
        );
    });
}

$max = 0;
foreach ($assoc as $columnName => $value) {
    $assoc[$columnName] = [
        'asDecimal' => str_replace(',', '.', $value),
        'value' => $value,
        'combinedLength' => strlen($columnName . $value),
    ];
    $max = max($max, $assoc[$columnName]['combinedLength']);
}
asort($assoc);

$min = 5;
foreach ($assoc as $columnName => $value) {
    $spaces = str_repeat(' ', $max - $value['combinedLength'] + $min);
    $assoc[$columnName] = $columnName . $spaces . $value['value'];
}

Here is a (PHP Demo). Then return your json:

echo json_encode($assoc)

In your javascript, you need to iterate the associative structure (there are no indexes to access values by).

dataType: "json",
success: function(data) {
    data = {...{"":"Επιλέξτε τύπο πλωτού", ...data}};  // prepend your static property to the incoming object
    jQuery.each(data, function (columnName, twoColumns) {       
        jQuery('#ff_elem9589').append(jQuery('<option>', {
            value: columnName,
            text: twoColumns
        }));
    });
}

Since <option> tags cannot contain html tags (in a valid HTML document as far as I know), you can only try to hack the display by applying font-family: monospace styling upon the option tags.

$prepared = [];
$max = 0;
foreach ($assoc as $columnName => $number) {
    $rawLength = strlen($columnName . $number);
    $max = max($max, $rawLength);
    $prepared[htmlentities($columnName)] = [
        'asDecimal' => (float) str_replace(',', '.', $number),  // declared as first element for sorting
        'length' => $rawLength,
        'value' => $number,
    ];
    
}
asort($prepared);

$min = 5;
foreach ($prepared as $encodedName => $subarray) {
    $prepared[$encodedName]['glue'] = str_repeat(' ', $max - $subarray['length'] + $min);
    unset($prepared[$encodedName]['asDecimal'], $prepared[$encodedName]['length']);
}

At this point you have this array data/structure:

array (
  'ALLIANZ' => 
  array (
    'value' => '86,96',
    'glue' => '     ',
  ),
  'AIG' => 
  array (
    'value' => '88,32',
    'glue' => '         ',
  ),
  'LLOYDS' => 
  array (
    'value' => '118,11',
    'glue' => '     ',
  ),
)

Here is a (PHP Demo). Then return your json:

echo json_encode($prepare)

In your javascript, you need to iterate the associative structure. append() is okay to use, but generating html tags from arguments via an object (jQuery('<option>', {...attributs&values})) is going to automatically apply html encoding as a security measure. Instead, create <option> tags as strings and append them as children into the <select> tag.

dataType: "json",
success: function(data) {
    data = {...{"":"Επιλέξτε τύπο πλωτού", ...data}};  // prepend your static property to the incoming object
    jQuery.each(data, function (encodedName, subdata) {
        jQuery('#ff_elem9589').append( 
            '<option value="' + encodedName + '">'
            + encodedName + subdata.glue + subdata.value
            + '</option>'
        );
    });
}

Since <option> tags cannot contain html tags (in a valid HTML document as far as I know), you can only try to hack the display by applying font-family: monospace styling upon the option tags. This will ensure that all character have the same width -- this gives the effect of the split text being stuck to the left and right of each visible option.

Ultimately, I have to say that this probably a little too unsavoury of a hack for my liking. Unless you are fully committed to this approach, I recommend a re-think. Perhaps consider a set of radio buttons with the values; you might add a collapse/expand effect if you need to minimise the footprint on the webpage.

dataType: "json",
success: function(data) {
    data = {...{"":"Επιλέξτε τύπο πλωτού", ...data}};  // prepend your static property to the incoming object
    jQuery.each(data, function (columnName, twoColumns) {       
        jQuery('#ff_elem9589').append(jQuery('<option>', {
            value: columnName,
            text: twoColumns
        }));
    });
}
 
Since `<option>` tags cannot contain html tags (in a valid HTML document as far as I know), you can only try to hack the display by applying `font-family: monospace` styling upon the option tags.

dataType: "json",
success: function(data) {
    data = {...{"":"Επιλέξτε τύπο πλωτού", ...data}};  // prepend your static property to the incoming object
    jQuery.each(data, function (columnName, twoColumns) {       
        jQuery('#ff_elem9589').append(jQuery('<option>', {
            value: columnName,
            text: twoColumns
        }));
    });
}

Since <option> tags cannot contain html tags (in a valid HTML document as far as I know), you can only try to hack the display by applying font-family: monospace styling upon the option tags.

Relevant reading:

• align two words in a select option
• Aligning part of a select option's text on the left and part on the right?
• How can I align part of text inside in select