Put white-space: nowrap in your .state.p-danger element. This will make texts getting outside of bounds go the next line instead.

I have a test label in a col-6 div. the text should have the width of the div with col-6 class.

this is how it looks now

how can i make the text inherit the div’s width?

<div class="col-md-6">
        <div class="form-group">
          <div>
            <input type="checkbox"/>
            <div class="state p-danger">
              <div [inlineSVG]="'assets/svg/accept.svg'"></div>
              <label>I will also be available to meet during the event so list me with the available resources</label>
            </div>
          </div>
        </div>
</div>