Semantic.Moscow

радиальный градиент?

ну так запретите перенос или поместите поля в блок с фиксированной минимальной шириной

кружочки можно сделать множественными background`ами с inline SVG (circle)
позиционировать флексом удобно (поиграться) прямо в консоли браузера.

чтобы упростить себе задачу, нужно использовать валидацию формы и на стороне клиента,
JS для этого не требуется!

1. используйте для input соответствующие типы!
type="email",
type="tel"
2. используйте maxlength для ограничения длины строки в поле
3. используйте атрибут placeholder для подсказок
4. используйте атрибут pattern для проверки введённых данных
4.1 для указания ошибки ввода есть псевдоклассы :valid, :invalid и :out-of-range
которые и нужно дёргать если pattern не совпал.
ну и конечно не забывать про атрибут required

background-image:(линия.png);
background-position:bottom left;
background-repeat:no-repeat;

линия.png - 1px
остальной бордер как обычно, с скруглением на нужный радиус.
вместо линия.png можно просто очень тонкий градиент нарисовать самим css

https://habr.com/ru/post/467049/

font-size-adjust наверное?

но это такое себе, странное.

ну нет, точно нет.

не очень понимаю суть вопроса.

если в момент формирования документа размер картинки передаётся в тег,
то и в юрл тега должен передаваться какой-то параметр (такой же)

т.е.:

$size = '200';
$name = 'image_1223';
$alt = 'описание картинки';
echo '<img width="'.$size.'" src="/images.php?'.$name.'&'.$size.'" alt="'.$alt.'"/>

ну а в images.php уже принимаете значения из $_GET и в ответ отдаёте нужный файл

ну а про "https://domain.com/img-id/<ширина>" это уже софистика и имеет отношение только к .htaccess

добавить :after который будет расположен под углом?

а сайт будет через свой VPN работать с API и данными?

можно на чистом HTML обойтись ;)
курить маны по details + summary