The default for block elements in html is for them to each sit on their own line, whereas inline elements will stay on the same line. By default, the sleeve and cap divs you added will sit on different lines, until you added display: inline-block to them. If you add a <p> tag, and don't add display: inline-block to it as well, it will mess up the other elements by moving things to a new line, which is what I assume is happening. Simply adding display: inline-block to the <p> tag will have it placed in a way that is not disrupting the previous layout, but the <p> tag is still not aligned and will appear at the bottom left of the element.
I would suggest using flexbox to align things. Here is how I implemented it:
h1 {
text-align: center;
}
.marker {
width: 150px;
height: 25px;
margin: 12px auto;
}
.red {
background: linear-gradient(#be2525, #E2665D, #bd562d);
box-shadow: 4px 5px 6px 0 #ee7878;
}
.blue {
background: linear-gradient(#1ea3ad, #5dc7e2, #137791);
box-shadow: 4px 5px 6px 0 #78b9ee;
}
.container {
background-color: white;
}
.cap,
.sleeve {
display: inline-block;
}
.cap {
width: 38px;
height: 25px;
}
.sleeve {
width: 73px;
height: 25px;
background-color: rgba(255, 255, 255, 0.6);
border-left: 12px double rgba(0, 0, 0, 0.75);
}
.green {
background: linear-gradient(#19ca69, #2ce68f, #37c47d);
box-shadow: 4px 5px 6px 0 #78eebd;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color markers</title>
<link href="markers.css" rel="stylesheet">
</head>
<body>
<h1>Colored Markers</h1>
<section class="container">
<p>This is the original green marker you created</p>
<div class="marker green">
<div class="cap"></div>
<div class="sleeve"></div>
</div>
<p>This blue example is using inline-block on the p element, so the styling of the other inline-block elements is not affected by the newline. It hasn't been aligned with flexbox which is why it is sitting on the bottom left corner (on the box-shadow)</p>
<div class="marker blue">
<div class="cap"></div>
<div class="sleeve"><p style="display: inline-block;">test</p></div>
</div>
<p>And finally we add alignment using flexbox with this red marker</p>
<div class="marker red" style="display: flex;">
<div class="cap"></div>
<div class="sleeve" style="display: flex; justify-content: center; align-items: center;"><p style="display: inline-block;">test</p></div>
</div>
</section>
</body>
</html>
There's a few little things to keep in mind with what my design has done. First off, in your original example the cap and sleeve elements where not sitting directly next to each other (if you use developer tools to inspect the elements you can see there are a few pixels between them.) I imagine this was not intended in your design because there isn't any CSS explicitly creating it. When I implemented flexbox this spacing is removed. Here you can see the slight difference. If you look at the red marker (the one I adjusted), the black bands are slightly to the left. This is actually the desired result because the cap width you've defined is not what is visually shown. So you may want to increase the cap width slightly to match the original.:
h1 {
text-align: center;
}
.marker {
width: 150px;
height: 25px;
margin: 12px auto;
}
.red {
background: linear-gradient(#be2525, #E2665D, #bd562d);
box-shadow: 4px 5px 6px 0 #ee7878;
}
.blue {
background: linear-gradient(#1ea3ad, #5dc7e2, #137791);
box-shadow: 4px 5px 6px 0 #78b9ee;
}
.container {
background-color: white;
}
.cap,
.sleeve {
display: inline-block;
}
.cap {
width: 38px;
height: 25px;
}
.sleeve {
width: 73px;
height: 25px;
background-color: rgba(255, 255, 255, 0.6);
border-left: 12px double rgba(0, 0, 0, 0.75);
}
.green {
background: linear-gradient(#19ca69, #2ce68f, #37c47d);
box-shadow: 4px 5px 6px 0 #78eebd;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color markers</title>
<link href="marker.css" rel="stylesheet">
</head>
<body>
<h1>Colored Markers</h1>
<section class="container">
<div class="marker red" style="display: flex;">
<div class="cap"></div>
<div class="sleeve" style="display: flex; justify-content: center; align-items: center;"><p style="display: inline-block;">test</p></div>
</div>
<div class="marker blue">
<div class="cap"></div>
<div class="sleeve"></div>
</div>
<div class="marker green">
<div class="cap"></div>
<div class="sleeve"></div>
</div>
</section>
</body>
</html>
And finally, the text is centered within the sleeve element, but the left doubled border you added on the left is not included within the dimensions, so the centering is based on the edge of the border, not including the border. From your desired picture it appears you could want the border included in the element width when it comes to centering. You can fix this using padding on the right side of the sleeve element, or by messing around with box-sizing. If you would prefer there to only be vertical alignment, and all the colors left edge to start at the same place (like your image), you can delete justify-content: center; and just use a left padding instead.
A few things to note about your code, you don't need two opening html tags, so if you want to denote the language is english you would replace <html> with <html lang="en"> instead of adding both. Also as pointed out by @Mister-Jojo you need to add opening and closing body tags to your html.
Here's some additional info from W3:
"Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
The following example shows the different behavior of display: inline, display: inline-block and display: block:" -W3 (CSS Layout - display: inline-block)
