Element-ui component label wrapping

I'm making a simple page but a survey on it, this page is going to mostly be seen on mobile devices so it has to very responsive to size. It's looking ok for now but I'm having a problem with the checkbox component label (https://element.eleme.io/#/en-US/component/checkbox) on my phone the label is to long so I get extra width on the container and it just messes everything up, it makes it so that the user would have to scroll horizontally to see it all and I don't want that to happen, I would like it to wrap into two lines instead.

This is my checkbox, I'll replace the text with something else, but it's about the same length.

<el-checkbox v-model="surveyForm.checkbox3"
                             label="These components use flex for layout, so please make.">
</el-checkbox>

How can I make the wrapping work? If not, how can I rework this so ensure the text behaves that way?