Making list items style independantly of each other - html

Question

I have a ul with several list items inside made up of h3s and lis with the class id of "close".
I have a hover style that expands the letter spacing on the h3s, the problem is, the items with the close class expand as well. I've tried a few different things before adding the class, like nth child etc (all which are visible in the code). I would like the close classed lis to remain the same size when the h3s are expanded.
Any help is appreciated.
jsfiddle here:
https://jsfiddle.net/snowwhyte/7eLmarnp/7/#&togetherjs=Uq5j49dUG0
CSS:
a {text-decoration:none;
}
li {list-style:none;
}
}
#openClose {
position:absolute;
top:200px;
margin-top:55px;
}
#openClose li{
list-style-type:none;
display:block;
padding-right:-50px;
}
#openClose li:nth-child(2n+2){
margin:30px 0 100px 0;
background-color:#000;
border:2px #fff solid;
text-align:center;
letter-spacing:1rem;
padding:10px 0 10px 0;
}
#openClose li:nth-child(2n+2):hover{
letter-spacing:-0.1rem;
transition:.3s;
}
#openClose li a h3{
font-family:Helvetica, Gotham, Helvetica, Arial, sans-serif;
color:#73a6c2;
}
.close{
}
#openClose li a h3:hover{color:#fff;
text-shadow:2px 1px 2px #000;
transition:.2s;
letter-spacing:1rem;
}
a:visited { text-decoration: none; color:#B8CEDB; }
a:hover { text-decoration: none; color:#D7D8D8; }
a:focus { text-decoration: none; color:#fff;
}
HTML:
<section id="openClose">
<ul>
<li><h3>Tool Descriptions</h3></li>
<li class="close">Close</li>
<li><h3>Key tools</h3></li>
<li class="close">Close</li>
<li><a href="#wrapper3"><h3>Adjustment Layers & <br>
Blending modes</h3></a></li>
<li class="close">Close</li>
</ul></section>

Answer 1

The thing is that you don't have any element with a defined width, so every elements have the width of the largest element.
To do what you're trying to achive, you have plenty of solutions depending on your needs.
You could define a fix width on one of the parents, like the ul for example and add the white-space: nowrap property to the h3 (see the fiddle) :
ul {
width: 200px;
}
#openClose li a h3{
white-space: nowrap;
}
You could also set a fix width on your li with the close button (see the fiddle) :
#openClose li:nth-child(2n+2){
width: 200px;
}

Answer 2

Here is my try. Like you see i changed a little your code joining some things and clean a little, but the point is in the width property of .close
https://jsfiddle.net/7eLmarnp/12/