Align items based on title availability in CSS - html

Question

I have created a panel as shows in the screenshots below. my panel will have a title heading and different icons which performs various operations. both these title heading and the icons are optional or in other words either one will not be available in many cases.
whenever i have title, i want all my icons to be at the extreme right side of the panel header which works fine as in first screenshot with the CSS i have written.
when i don't have a title i want all my icons to be on the extreme left side of the panel header as shown in second screenshot which i am facing difficulty to achieve.
SCREENSHOTS
HTML
<div class="panel">
<div class="panel-header ">Title Goes Here
<div class="toolbar-button-group">
<button class="toolbar-button-stroke icon-add"></button>
<button class="toolbar-button-stroke icon-hide"></button>
<button class="toolbar-button-stroke icon-edit"></button>
<button class="toolbar-button-stroke icon-options"></button>
</div>
</div>
<div class="panel-content "></div>
</div>
CSS
.panel {
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
background: #fff;
width: 100%;
height: 100%;
}
.panel-header {
color: #354052;
text-transform: capitalize;
font-size: 20px;
height: 40px;
line-height: 40px;
margin: 0;
padding-left: 24px;
border-bottom: 2px #BBBBBB solid;
}
.panel-content {
padding: 24px;
background: white;
}
.toolbar-button-stroke{
background:white;
border: none;
border-radius: 4px;
padding: 6px;
margin: 0px 3px;
color:black;
font-size: 15px;
text-transform: uppercase;
cursor:pointer;
outline: none;
}
.toolbar-button-group{
float: right;
}
i prefer CSS solutions with out positioning. Fiddle link here
Thanks in advance

Answer 1

If you can change your HTML around a bit to add an extra element, you can use :empty to target it based on the span having content or not with the next sibling selector.
.panel {
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
background: #fff;
width: 100%;
height: 100%;
}
.panel-header {
color: #354052;
text-transform: capitalize;
font-size: 20px;
height: 40px;
line-height: 40px;
margin: 0;
padding-left: 24px;
border-bottom: 2px #BBBBBB solid;
}
.panel-content {
padding: 24px;
background: white;
}
.toolbar-button-stroke {
background: white;
border: none;
border-radius: 4px;
padding: 6px;
margin: 0px 3px;
color: black;
font-size: 15px;
text-transform: uppercase;
cursor: pointer;
outline: none;
}
.toolbar-button-group {
float: right;
}
span:empty + .toolbar-button-group {
float: left;
}
<div class="panel">
<div class="panel-header "><span>Title Goes Here</span>
<div class="toolbar-button-group">
<button class="toolbar-button-stroke icon-add">A</button>
<button class="toolbar-button-stroke icon-hide">B</button>
<button class="toolbar-button-stroke icon-edit">C</button>
<button class="toolbar-button-stroke icon-options">D</button>
</div>
</div>
<div class="panel-content "></div>
</div>
<br/>
<div class="panel">
<div class="panel-header "><span></span>
<div class="toolbar-button-group">
<button class="toolbar-button-stroke icon-add">A</button>
<button class="toolbar-button-stroke icon-hide">B</button>
<button class="toolbar-button-stroke icon-edit">C</button>
<button class="toolbar-button-stroke icon-options">D</button>
</div>
</div>
<div class="panel-content "></div>
</div>

Answer 2

Solution is simple: https://jsfiddle.net/45kuucbn/1/
Add span tag around your title, if is present use + to add style to button group.
<div class="panel">
<div class="panel-header ">
<span>Title Goes Here</span>
<div class="toolbar-button-group">
<button class="toolbar-button-stroke icon-add">a</button>
<button class="toolbar-button-stroke icon-hide">a</button>
<button class="toolbar-button-stroke icon-edit">a</button>
<button class="toolbar-button-stroke icon-options">a</button>
</div>
</div>
<div class="panel-content "></div>
</div>
<div class="panel">
<div class="panel-header ">
<div class="toolbar-button-group">
<button class="toolbar-button-stroke icon-add">a</button>
<button class="toolbar-button-stroke icon-hide">a</button>
<button class="toolbar-button-stroke icon-edit">a</button>
<button class="toolbar-button-stroke icon-options">a</button>
</div>
</div>
<div class="panel-content "></div>
</div>
.panel {
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
background: #fff;
width: 100%;
height: 100%;
}
.panel-header {
color: #354052;
text-transform: capitalize;
font-size: 20px;
height: 40px;
line-height: 40px;
margin: 0;
padding-left: 24px;
border-bottom: 2px #BBBBBB solid;
}
.panel-content {
padding: 24px;
background: white;
}
.toolbar-button-stroke{
background:white;
border: none;
border-radius: 4px;
padding: 6px;
margin: 0px 3px;
color:black;
font-size: 15px;
text-transform: uppercase;
cursor:pointer;
outline: none;
}
.toolbar-button-group{
display:inline-block;
}
.panel-header span + .toolbar-button-group {
float:right;
}

Answer 3

when text heading block code works like what you want
here is codepen.io live example
if( $('.left').is(':empty') ) {
$('.right').addClass('full');
$('.left').addClass('hidden');
}
.title-container {
width: 300px;
margin: 100px auto;
outline: 1px solid #333;
padding: 15px 25px;
font-family: Arial, sans-serif;
font-size: 12px;
}
.title-container .col-2 {
width: 50%;
float: left;
outline: 1px solid #ccc;
padding: 5px;
box-sizing: border-box;
}
.title-container .hidden {
display: none;
}
.title-container .icon {
display: inline-block;
outline: 1px solid #ccc;
width: 20px;
text-align: center;
}
.title-container .right {
text-align: right;
}
.title-container .full {
width: 100%;
}
.title-container .full.right {
text-align: left;
}
.title-container::after {
display: table;
content: "";
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="title-container">
<div class="col-2 left heading">Delete me and see result</div> <!-- heading block-->
<div class="col-2 right icons"> <!-- icons block -->
<span class="icon">1</span>
<span class="icon">2</span>
<span class="icon">3</span>
</div>
</div>