Place divs on the same level-CodePudding

Im wondering how to make both divs aligned? Can't get it up or down to level them out. This.

.crypto-card .value-label{
  width: 100%;
  text-align: right;
  font-weight: 500;
  font-size: .8rem;
}
 .crypto-card .value{
  font-size: 1.5rem;
  font-weight: 100;
  right: -60px;
  top: 4px;
  text-align: left;
}

<div >Ethereum classic</div>
        <div ><span >15.29 TH/s</span></div>

}

CodePudding user response：

Maybe something like this?

.crypto-card {
    width: 20rem;
    height: 5rem;
    border: 1px solid black;
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
}

.crypto-value-label {
    position: absolute;
    bottom: 10%;
    right: 10%;
}

.crypto-image {
    height: 1rem;
    padding: 0 2rem;
}

<div >
    <img  src="https://upload.wikimedia.org/wikipedia/commons/0/01/Ethereum_logo_translucent.svg"/>
    <div >
        Ethereum classic
    </div>
    <div >
        <span >15.29 TH/s</span>
    </div>
</div>

You can change the positioning of the label by adjusting

bottom: 10%;
right: 10%;

of the '.crypto-value-label' class.

CodePudding user response：

Is this close to what you're trying to accomplish?

.flex {
  display: flex;
  align-items: end;
  justify-content: space-between;
  width: 400px;
  padding: 5px;
  border: 1px solid #ccc;
}

.value {
  flex: 1;
  font-size: 1.5rem;
  font-weight: 100;
  padding: 30px 0;
}

.value-label {
  font-weight: 500;
  font-size: .8rem;
}

<div >
  <div >Ethereum classic</div>
  <div ><span >15.29 TH/s</span></div>
<div/>

CodePudding user response：

you just need to set the crypto-card div’s display to flex and then set the align-self property of the div that you wanna move down to flex-end.

.crypto-card{
   height:100px;
   border:2px solid green;
   width:100%;
   display:flex;
   justify-content:space-around;
 }
 

.crypto-card .value-label{
  align-self:flex-end;
  text-align: right;
  font-weight: 500;
  font-size: .8rem;
}
.crypto-card .value{
 
  font-size: 1.5rem;
  font-weight: 100;
   
}

<div class= "crypto-card">
    <div >Ethereum classic</div>
    <div >
       <span >15.29 TH/s</span>
    </div>
</div>

CodePudding user response：

can do it with css grid also, you just have to say you want a grid with two columns/rows and that you want the value label in the second row/column. Has the benefit of not having to mess with top and bottom.

<head>
<style>
.crypto-card{
display:grid;
grid-template-columns: max-content max-content;
grid-template-rows: 1fr 1fr
}

.crypto-card .value-label{
  font-weight: 500;
  font-size: .8rem;
  grid-column-start: 2;
  grid-row-start: 2;
}
 .crypto-card .value{
  font-size: 1.5rem;
  font-weight: 100;
}
</style>
</head>
<body>
<div >
<div >Ethereum classic</div>
        <div ><span >15.29 TH/s</span></div>
</div>
</body>