DontVoteMeDown DontVoteMeDown - 1 month ago 6
CSS Question

Show a div and a table side by side

In the snippet below I want to put the clear button(hover inputs to show) by the right side of the table, align with the inputs, like this:

enter image description here

It is possible to achieve that without changing the current html structure? I have tried so many things but could not get it to work.



$(".layer-lookup2").on("mouseover mouseout", function(e) {
$(".clear-button")[(e.type == "mouseover" ? "show" : "hide")]();
});

.layer-lookup2 {
width: 100%;
}

.layer-lookup2 table {
table-layout: fixed;
}

.layer-lookup2 td > div,
.layer-lookup2 span.k-widget {
max-width: 100px;
}

.layer-lookup2 td > div {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

.layer-lookup2 td > input {
max-width: 50px
}

.layer-lookup2 td > .label {
padding-left: 5px;
cursor: pointer
}

.layer-lookup2 td > .label:hover,
.layer-lookup2 td > .label.hover {
font-weight: bold
}

.layer-lookup2 .clear-button {
display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layer-lookup2">
<table>
<tr>
<td>
<div class="label">
Item #1
</div>
<input>
</td>
<td>
<div class="label">
Item #2
</div>
<input>
</td>
<td>
<div class="label">
Item #3
</div>
<input>
</td>
<td>
<div class="label">
Item #4
</div>
<input>
</td>
</tr>
</table>
<div class="clear-button"><button class="k-button">X</button></div>
</div>





Fiddle version

Answer

You can achieve this with flexbox.

Give your .layer-lookup2 a display: flex; and align-items: flex-end;. You'll also need to add some padding to the button if you want it to be aligned with the inputs.

CSS

.layer-lookup2 {
    display: flex;
    align-items: flex-end;
}

.layer-lookup2 .clear-button {
  padding: 4px;
}

JSFiddle

Comments