It's because you've added slds-col--padded class in the grid DOM elements.
According to Salesforce Lightning Design System:
By default, the grid items within a .slds-grid do not stretch to take up that available white-space on the main axis.
Apply .slds-col to a grid item, it will stretch across the main axis. The width of each grid item will be determined by the content within that region.
Source: https://www.lightningdesignsystem.com/components/utilities/grid/
So you may remove the slds-col--padded class and add slds-p-left--small and slds-p-right--small classes instead to the div.
So your component code would look like this:
<div class="slds-grid "> <div class="slds-p-left--small slds-p-right--small slds-size--1-of-3 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--4-of-12 " > <div class="slds-form-element is-required"> <label class="slds-form-element__label " for="something"> <abbr class="slds-required" title="required">*</abbr> Bang Bang </label> <div class="slds-form-element__control "> <input id="something" class="slds-input" type="text" maxlength="20" required=""/> </div> </div> </div> <div class="slds-p-left--small slds-p-right--small slds-size--1-of-3 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--4-of-12 " > <div class="slds-form-element "> <label class="slds-form-element__label " for="hola">hola</label> <div class="slds-form-element__control "> <textarea id="hola" class="slds-textarea" type="text" maxlength="255"/> </div> </div> </div> </div> PS: In the question you've added an extra "</div>". I've removed the same in the answer.