Pavel Z. Pavel Z. - 3 months ago 12x
CSS Question

Align elements inside fieldset

I tried different options in order to align elements inside a fieldset in order to keep both title, text and Learn More button on the same lines using different approaches. But the result was still negative:
Align result

This is my code:

fieldset {
height: 100%;
fieldset.scheduler-border {
border: 2px solid #efefef !important;
border-radius: 5px;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;

legend.scheduler-border {
font-size: 0.7em !important;
font-weight: bold !important;
text-align: center !important;
width:inherit; /* Or auto */
padding:0 10px; /* To give a bit of padding on the left and right */
vertical-align: sub;

text-transform: none;
background-color: #e64232;
color: white;

<div class="col-md-4">
<fieldset class="scheduler-border">
<legend class="scheduler-border red">DEVICES</legend>
<p class="desc-features">All our products are perfectly optimized for mobile, desktop and tablet.</p>
<button type="button" class="btn btn-danger btn-devices">Learn More</button>

I would appreciate any possible suggestions, cause I did not find any help in information concerning this topic.


As Paulie_D mentioned in the comment, there is no method for this but if suitable for you to define min-height then you can do the trick. Add min-height:100px for your description.

See fiddle: