Assign width and alignment for a reusable component in CSS

Question

I'm working on a reusable layout with some text to the left and an image to the right and below is the simple css code that I have.

I will provide user the flexibility to assign width and alignment for the body text/ description. If the user passes both of those properties with no image, I would like to reuse the below code to set a width and alignment and I am trying to figure out the way to do that.

Can I just simply assign a style to flexboxtext class with width to 100% and set alignment to the h4 tag which is the description or is there another way to approach this?

 .flexboxcontainer { display: flex; gap: 400px; .flexboxtext { width: 30% }.flexboximage { margin-top: 50px; } } <div class="flexboxcontainer"> <div class = "flexboxtext"> <h1 id="headline">Welcome to the test page</h1> <h2 id="subheadline">This is a sub headline</h2> <h4 id="description"><p>This is a description of the page</p></h4> </div> <div class = "flexboximage"> <img src="https://cdn.pixabay.com/photo/2016/10/26/19/00/domain-names-1772243_960_720.jpg?width=20px;height=20px;" </div> </div>