magento 2 admin config text fields side by side

Question

How to add 2 or 3 text fields inline at the admin configuration of Magento 2?

As I checked everywhere, I am able to add text fields one by one.

How Can I do this as my admin config fields look like below

Answer 1

On your module, in etc/adminhtml/system.xml you can add this group config

<group id="group_id" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
<label>Your Label</label>

<field id="your_field_id" translate="label comment" type="text" sortOrder="4" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Your Field Label</label>
    <frontend_model>[Vendor]\[Module]\Block\Adminhtml\Form\Renderer\Config\TextFieldsConfig</frontend_model>
</field>

then in [Vendor]/[Module]/Block/Adminhtml/Form/Renderer/Config/TextFieldsConfig.php add the following code

<?php

namespace [Vendor]\[Module]\Block\Adminhtml\Form\Renderer\Config;
use Magento\Config\Block\System\Config\Form\Field;
use Magento\Framework\Data\Form\Element\AbstractElement;

class TextFieldsConfig extends Field
{
   /**
     * @param AbstractElement $element
     * @return string
     */
    protected function _getElementHtml(AbstractElement $element) {
        $element->setStyle('width:70px;margin-right: 20px;')->setName($element->getName() . '[]');

    if ($element->getValue()) {
        $values = explode(',', $element->getValue());
    } else {
        $values = [];
    }

    $field1 = $element->setValue(isset($values[0]) ? $values[0] : null)->getElementHtml();
    $field2 = $element->setValue(isset($values[1]) ? $values[1] : null)->getElementHtml();
    $field3 = $element->setValue(isset($values[1]) ? $values[1] : null)->getElementHtml();

    return '<div style="float: left;">' . $field1 . '<p class="note"><span>' . __('Your Label 1') . '</span></p></div>'
    . '<div style="float: left;">' . $field2 . '<p class="note"><span>' . __('Your Label 2') . '</span></p></div>'
    . '<div style="float: left;">' . $field3 . '<p class="note"><span>' . __('Your Label 3') . '</span></p></div>';
}

}

you can add as many fields as you need this way

Answer 2

If you want only time field for your configuration then you can use type time in your configuration.

 <field id="time" translate="label" type="time" sortOrder="3" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Start Time</label>
  </field>

On the backend It looks like this,