How to make lines opposite each other?

Question

Need to make lines opposite to each other, now the lines are under each other. Tried a lot of methods but nothing work, please help! Really stuck with that. See the code below and a picture that shows the desired result, idk what to do. Tried to add margin; top; bottom; padding, these methods didn't do anything.

Here's the CSS and HTML:

.crypto-card{
  width: 250px;
  height: 230px;
  background: white;
  -webkit-box-shadow: 0px 3px 8px 0px rgba(194,192,194,1);
  -moz-box-shadow: 0px 3px 8px 0px rgba(194,192,194,1);
  box-shadow: 0px 3px 2px 0px rgba(240,240,240,1);
  border-radius: 6px;
  transition: .3s;
  margin-left: 15px;
  margin-right: 25px;
  margin-bottom: 20px;
  border: 1px solid rgb(245, 245, 245);
}

.crypto-card:hover{
  transform: translateY(-1px);
  -webkit-box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
  -moz-box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
  box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
}

.crypto-card .body{
  width: 100%;
  border-top: 1px solid rgb(240, 240, 240);
  padding: 10px;
}

.crypto-card .logo-sprite{
  width: 29px;
  height: 29px;
  margin: 10px;
}

.crypto-symbol{
  border-left: 1px solid rgb(220, 220, 220);
  padding-left: 10px;
  font-size: 1.3rem;
/*   font-family: 'Loto', sans-serif; */
  letter-spacing: 5px;
  text-transform: uppercase;
/*   color: #3c3c3c; */
  font-weight: 500;
  color: rgb(70, 70, 70);
  padding-bottom: 4px;
  position: relative;
  top: 4px;
}

.crypto-card .price-label{
  width: 100%;
  text-align: left;
  color: rgb(190, 190, 190);
  font-weight: 500;
  font-size: .8rem;
}
 .crypto-card .price{
  font-size: 1.5rem;
  font-weight: 100;
  right: -60px;
  top: 4px;
  text-align: right;
}

<div class="d-flex justify-content-left" style="margin-top: 10px; padding-left: 5%; padding-right: 5%;">
  <div class="row" style="">
     <div class="crypto-card">
      <span>
        <img src="https://s2.coinmarketcap.com/static/img/coins/64x64/1.png" class="logo-sprite"  width="16" height="16" alt="Bitcoin">
        <span class="crypto-symbol">BTC</span>

      </span>
      <div class="body">
        <span class="price">$3865.58</span>
        <div class="price-label"><span class="title">Price</span></div>
        <span class="volume">$67,585,868,137</span>
    </div>
  </div>

But I need it similar to this

@OMiShah [Using a table is **not** recommended for layout purposes.](https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) — esqew, Oct 19 '22 at 15:18
@esqew tables ARE recommended for layout when they are clearly tabular data. — Paulie_D, Oct 19 '22 at 16:22

score 1 · Answer 1 · answered Oct 19 '22 at 16:10

Using a display: grid would make this super easy.

Here's and example:

* {
    box-sizing: border-box;
}
.container {
    width: 500px;
    margin: auto;
    padding: 20px;
}
.card {
    display: grid;
    grid-template-columns: 50px auto;
    grid-template-rows: 50px 200px;
    border: 1px solid #eee;
    border-radius: 5px;
}
.card .image {
    display: block;
    align-self: stretch;
    justify-self: stretch;
    padding: 5px;
    border: 1px solid #eee;
    border-top: 0;
    border-left: 0;
}
.card .header {
    padding: 10px;
    border-bottom: 1px solid #eee;
}
.card .side {
    border-right: 1px solid #eee;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.card .side .text {
    rotate: -90deg;
    translate:-12px 0;
}

.card .content {
    padding: 10px;
}

<div class="card">
    <img
        src="https://s2.coinmarketcap.com/static/img/coins/64x64/1.png"
        class="image"
        alt="Bitcoin"
    />
    <div class="header">BTC is a scam</div>
    <div class="side">
        <div class="text">BIG SCAM</div>
    </div>
    <div class="content">content in here</div>
</div>

How to make lines opposite each other?

1 Answers1