[SalesForce] slds-form-element_horizontal change distribution of label and field

It is possible, add Design to your component in Developer Console and set the following code there:

<design:component label="new label" />

Based on what I can see in the inspector it seems that this is hard coded out of the box functionality coming from the css classes of your <div slot="body" class="slds-align_absolute-center slds-form_horizontal">.

CSS for the label

flex-basis: calc(33% - 1.25rem);

CSS for the div container of the input

padding-left: 33%;

That 33% padding is what is causing the issue and that is coming down from the class of the wrapping <div> that you have in place.

Solution

1. What you can do to avoid this headache is try to tweak the classes of the parent <div> which currently are class="slds-align_absolute-center slds-form_horizontal and see if you can achieve what you want using slds styling.

2. If that doesn't work you can try to omit the label of the <lightning-input> and instead put your own label in place.

I put a playground for you with a workaround that can resolve your problem. Check it out here.

HTML

<div class="wrapper">
    <span>Name</span>
    <div class="input-wrapper">
        <lightning-input type="text" label=" " value="ABC"></lightning-input>
    </div>
</div>

CSS

.wrapper {
    padding-left: 5px;
}
.wrapper > span {
    font-family: "Salesforce Sans",Arial,sans-serif;
    color: #3e3e3c;
    font-size: .75rem;
    padding-right: 10px;
}
.input-wrapper {
    display: inline-block;
    max-width: 50%;
    margin-bottom: .75rem;
}