input and span elements with tooltip within div in same line - html

Question

The span element in div has a tooltip. When I remove the tooltip from the span, see second div (word), the input field moves a bit higher than rest of input fields.
How can I fix this issue? Thank you in advanced.
<div>
<div class="word">
<input id="word-4" name="word-4" type="text" data-index="3" value="the">
<span class="x-tag" value="4"></span>
<span class="tooltip" value="4"><span class="tooltiptext">Words</span>><</span>
</div>
<div class="word">
<input id="word-5" name="word-5" type="text" data-index="4" value="supermarket">
<span class="x-tag" value="5"></span>
<span class="" value=""></span>
</div>
<div class="word">
<input id="word-6" name="word-6" type="text" data-index="5" value="nerby">
<span class="x-tag" value="6"></span>
<span class="tooltip" value="6"><span class="tooltiptext">Words</span>><</span>
</div>
</div>
Here is the full example:
https://jsfiddle.net/myFiddler/5encgkh0/1/

Answer 1

Remove float:left from input, there is no need to use and give padding to parent element
/***************/
/* Tool-Tip */
/***************/
/*https://www.w3schools.com/css/css_tooltip.asp*/
.parent{
padding:25px;
}
.tooltip {
position: relative;
display: inline-block;
/* border-bottom: 1px dotted black; If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
position: absolute;
z-index: 1;
visibility: hidden;
width: 120px;
margin-left: -60px;
bottom: 100%;
left: 50%;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 2s;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.tooltip .tooltiptext:after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
/********************/
/*** Word Input ***/
/********************/
.word {
width: 141px;
display: inline-block;
box-sizing: border-box;
position: relative;
margin-bottom: 12px;
}
.word .no-linking {
cursor: auto;
}
.icon-link.checked {
color: rgb(255,120,90);
}
.word > input {
width: 100px !important;
line-height: 24px;
font-size: 14px !important;
}
span.word {
border-radius: 4px;
margin-bottom: 5px;
}
.icon-link {
display: inline-block;
padding-top: 6px;
padding-left: 3px;
cursor: pointer;
}
.x-tag:after {
font-size: 13px;
content: "x";
padding: 1px 2px;
position: absolute;
display: inline-block;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 100;
right: 36px;
line-height: 24px;
}
<div class="parent">
<div class="word">
<input id="word-1" name="word-1" type="text" data-index="0" value="I">
<span class="x-tag" value="1"></span>
<span class="tooltip" value="1"><span class="tooltiptext">Words</span>><</span>
</div>
<div class="word">
<input id="word-2" name="word-2" type="text" data-index="1" value="go">
<span class="x-tag" value="2"></span>
<span class="tooltip" value="2"><span class="tooltiptext">Words</span>><</span>
</div>
<div class="word">
<input id="word-3" name="word-3" type="text" data-index="2" value="to">
<span class="x-tag" value="3"></span>
<span class="tooltip" value="3"><span class="tooltiptext">Words</span>><</span>
</div>
<div class="word">
<input id="word-4" name="word-4" type="text" data-index="3" value="the">
<span class="x-tag" value="4"></span>
<span class="tooltip" value="4"><span class="tooltiptext">Words</span>><</span>
</div>
<div class="word">
<input id="word-5" name="word-5" type="text" data-index="4" value="supermarket">
<span class="x-tag" value="5"></span>
<span class="" value=""></span>
</div>
<div class="word">
<input id="word-6" name="word-6" type="text" data-index="5" value="nerby">
<span class="x-tag" value="6"></span>
<span class="tooltip" value="6"><span class="tooltiptext">Words</span>><</span>
</div>
</div>