CODEWITHSUNDEEP
csshtml
Senjuti Mahapatra
Senjuti Mahapatra

Reputation: 2590

Align two span elements to same line irrespective of font size and content length using CSS

I have two rows. First row has an indicator and a number. Second row has only a number. I want the numbers of both the rows to align in a line vertically. But I am unable to do so. The spans should align irrespective of font size and content length.

Below is the snippet:

#top-area {
    border: 3px solid #000;
}
#top-area>div:nth-of-type(1) {
    width: 100%;
}
div#header {
    background-color: #000;
    color: #fff;
    padding-top: 2px;
    padding-bottom: 2px;
}
div {
    text-align: center;
}
#top-area>div:nth-of-type(2) {
    width: 100%;
    font-weight: bold;
    margin-bottom: -1px;
}
.DownTrend-diamond {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    margin-right: 10px;
    display: inline-block;
}
 #top-area>div:nth-of-type(3) {
    width: 100%;
}
<div id="top-area">
   <div id="header" style="font-weight:normal;font-size: 16px;background-color: #5F6B6D;color: #000;">Header</div>
   <div style="font-size:14px; color: #008000!important ;font-weight:normal;background-color:#fff" class="DownTrend  ">
      <div class="DownTrend-diamond" style="background-color:#FF0000 !important;width:10.5px;height:10.5px;"></div>
      <span style="color:#000 !important;">15.0</span>
   </div>
   <div style="font-size:14px; color: #000 !important ;font-weight:normal;background-color:#fff" class="  "><span style="color:#000 !important;">250.0</span></div>
</div>

How can I fix this issue? I cannot change the HTML structure much. Can it be done using pure CSS? Any help will be appreciated.

Expected Output : enter image description here

Upvotes: 2

Views: 528

Answers (4)

wazz
wazz

Reputation: 5068

#row1 div {
    float: left;
    left: 47%;
    margin-right: 0 !important;
    margin-top: 3px;
    position: relative;
}
#row1 span {
    float: left;
    left: 48.3%;
    position: relative;
}
#row2 {
    clear: left;
    position: relative;
    text-align: left;
}
#row2 span {
    left: 50%;
    position: relative;
}

https://jsfiddle.net/wazz/77r72nwL/

Upvotes: 0

LKG
LKG

Reputation: 4192

Use flex to get the same

Update html add class

<div id="top-area">
  <div id="header" style="font-weight:normal;font-size: 16px;background-color: #5F6B6D;color: #000;">Header</div>
  <div style="font-size:14px; color: #008000!important ;font-weight:normal;background-color:#fff; margin-top:5px;" class="DownTrend  ">
    <div class="squre">
      <div class="DownTrend-diamond" style="background-color:#FF0000 !important;width:10.5px;height:10.5px;">&nbsp;</div>
    </div>
    <div class="value">
      <span style="color:#000 !important;">15.0</span>
    </div>
  </div>
  <div>
    <div class="squre">
      <div class="" style="background-color:#FF0000 !important;"></div>
    </div>
    <div class="value">
      <span style="color:#000 !important;">25000.0</span>
    </div>
  </div>

Update css part

#top-area>div:nth-of-type(2) {
    width: 100%;
    font-weight: bold;
    margin-bottom: -1px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
}
 #top-area>div:nth-of-type(3) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
}
.value {
    flex: 1 0 35%;
    align-self: flex-start;
    text-align: left;
}
.squre {
    flex: 1 0 30%;
    align-self: flex-start;
    text-align: right;
}


#top-area {
  border: 3px solid #000;
}

#top-area>div:nth-of-type(1) {
  width: 100%;
}

div#header {
  background-color: #000;
  color: #fff;
  padding-top: 2px;
  padding-bottom: 2px;
}

div {
  text-align: center;
}

#top-area>div:nth-of-type(2) {
  width: 100%;
  font-weight: bold;
  margin-bottom: -1px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
}

 #top-area>div:nth-of-type(3) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
}

.value {
  flex: 1 0 35%;
  align-self: flex-start;
  text-align: left;
}

.squre {
  flex: 1 0 30%;
  align-self: flex-start;
  text-align: right;
}

.text-left {
  text-align: left;
}

.DownTrend-diamond {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  margin-right: 10px;
  display: inline-block;
}
<div id="top-area">
  <div id="header" style="font-weight:normal;font-size: 16px;background-color: #5F6B6D;color: #000;">Header</div>
  <div style="font-size:14px; color: #008000!important ;font-weight:normal;background-color:#fff; margin-top:5px;" class="DownTrend  ">
<div class="squre">
  <div class="DownTrend-diamond" style="background-color:#FF0000 !important;width:10.5px;height:10.5px;">&nbsp;</div>
</div>
<div class="value">
  <span style="color:#000 !important;">15.0</span>
</div>
  </div>
  <div>
<div class="squre">
  <div class="" style="background-color:#FF0000 !important;"></div>
</div>
<div class="value">
  <span style="color:#000 !important;">25000.0</span>
</div>
  </div>

Upvotes: 2

Hemant Kumar
Hemant Kumar

Reputation: 367

Please check this:

#top-area {
    border: 3px solid #000;
}
#top-area>div:nth-of-type(1) {
    width: 100%;
}
div#header {
    background-color: #000;
    color: #fff;
    padding-top: 2px;
    padding-bottom: 2px;
}
div {
    text-align: center;
}
#top-area>div:nth-of-type(2) {
    width: 100%;
    font-weight: bold;
    margin-bottom: -1px;
}
.DownTrend-diamond {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    margin-right: 10px;
    display: inline-block;
}
 #top-area>div:nth-of-type(3) {
    width: 100%;
}
<div id="top-area">
   <div id="header" style="font-weight:normal;font-size: 16px;background-color: #5F6B6D;color: #000;">Header</div>
   <div style="font-size:14px; color: #008000!important ;font-weight:normal;background-color:#fff; padding-left: 50%; text-align: left; width: 50%" class="DownTrend  ">
      <div class="DownTrend-diamond" style="background-color:#FF0000 !important;width:10.5px;height:10.5px; position: absolute; margin-left: -30px; margin-top: 4px"></div>
      <span style="color:#000 !important;">15.0</span>
   </div>
   <div style="font-size:14px; color: #000 !important ;font-weight:normal;background-color:#fff; padding-left: 50%; text-align: left; width: 50%" class="  "><span style="color:#000 !important;">250.0</span></div>
</div>

Upvotes: 1

Nivedita
Nivedita

Reputation: 164

Try this

Add a margin-left in the style of the span 

<div style="font-size:14px; color: #000 !important ;font-weight:normal;background-color:#fff" class="  "><span style="color:#000 !important;margin-left: 30px;">250.0</span></div>

and you will get your expected result

Upvotes: 0

Related Questions