How to make a responsive graphic frame for H2 Elements?

Question

Firstly I apologize if this question seems unbelievably dumb to some of the more experienced coders here. I have no professional coding training, and very little experience.

So currently I am working on tinkering with the CSS sheet on a website that I am working on and I am trying to create graphic accents that encapsulate the first h2 title on my front page. I tried doing this with html just doing image embeds around an H2 tag, but I was not able to make it come together with the crazy line breaking.

Here is a quick mockup of what I am trying to do Here is a quick mockup of what I am trying to do

Here is a picture of the closest result i've gotten...

I accomplished this by using this HTML code:

    <img src="https://www.bookacookie.com/files/theme/border1.png" 
    alt="Decorative Border" style="text-align:center;" width="24" 
    height="39"><h2 class="wsite-content-title" style="text- 
    align:center;">Welcome</h2><img 
    src="https://www.bookacookie.com/files/theme/border2.png" 
    alt="Decorative Border" style="text-align:center;" width="24" height="39">

Now I did manage to isolate the part of my websites CSS sheet that seems to control the field I am working on which i'll list below:

}.wsite-content-title, #banner h2, .blog-title, h2#wsite-com-title {
font-size: 1.5em;
font-family: 'Montserrat', Arial, sans-serif;
margin: 0 auto 1em;
font-weight: bold;
color: #000000;
}

Can someone please point me in the direction of the correct and/or easiest way to create these types of accents? I'm kind of interested in the process rather than just this one fix because this is a technique I envision myself needing to use in a lot of different places.

Thank you for your time!

Answer 1

You could read about flex-box, this is a very flexible way of doing that task.

See a fiddle example that i made for you, this could be what you are looking for

https://jsfiddle.net/42mjvzL3/

HTML

<div class="container" style="background-color: yellow"></div>
<div class="item" style="background-color: blue"></div>
<div class="item" style="background-color: grey"></div>
<div class="item" style="background-color: red"></div>

CSS:

.container {
width: 200px;
height: 100px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}

.item{
flex-grow: 1;
}

Answer 2

It's better if you keep your styling in one place. Since you've clearly got a stylesheet, you should just keep all of it there. That being said, I was able to get your desired results by floating both the first img and the h2, and adjusting some other properties of the h2.

Add a class of welcome to both the first img and the h2:

<img class="welcome" src="https://www.bookacookie.com/files/theme/border1.png" 
alt="Decorative Border" style="text-align:center;" width="24" height="39">
<h2 class="wsite-content-title welcome" style="text- 
align:center;">Welcome</h2>

Then in your stylesheet, add this:

.welcome {float: left;}

And adjust your existing class to this:

.wsite-content-title, #banner h2, .blog-title, h2#wsite-com-title {
font-size: 1.5em;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: bold;
color: #000000;
line-height: 0;
padding: 0 10px;}

Welcome

(Sorry, I don't know yet how to post a snippet)

Hope that helps!