some inlines

by jshacker

HTML

<div id="container">
  <div class="inline-content first">English</div>
  <div class="inline-content">First inline content</div>
  <div class="inline-content second">Hindi</div>
  <div class="inline-content">Second inline content</div>
</div>

<div>
  <a class="fA">first a</a>
  <span class="fS">first span</span>
  <div class="ibD">inline block div</div>
</div>

CSS

#container {
  border: thin solid navy;
}

.inline-content {
  display: inline-block;
  border: thin solid teal;
  width: 20%;
}

.first {
  height: 20px;
  margin: 20px 0;
  /* vertical-align: bottom; */
}

.second {
  height: 40px;
  margin: 10px 0;
  padding: 10px;
  vertical-align: bottom;
}

.fA {
  margin: 10px 0;
  padding: 10px 0;
}

.ibD {
  display: inline-block;
  height: 30px;
}