How can I move this ribbon up?-CodePudding

I've got two divs, and I want to move the "bookmark" class higher so that it is at the same height than the "edge" class, how would you guys approach this?

.bookmark {
  width: 0;
  height: 350px;
  border: 35px solid rgb(236, 236, 236);
  border-bottom: 30px solid transparent;
  opacity: .9;
  position: relative;
  left: 50px;
}

.edge {
  width: 5px;
  height: 500px;
  border-left-style: solid;
}

.bookmark,
.edge {
  display: inline-block;
}

<div ></div>
<div ></div>

CodePudding user response：

Set the vertical-align property to top for the bookmark div:

.bookmark {
  width: 0;
  height: 350px;
  border: 35px solid rgb(236, 236, 236);
  border-bottom: 30px solid transparent;
  opacity: .9;
  position: relative;
  left: 50px;
  vertical-align:top;
}

.edge {
  width: 5px;
  height: 500px;
  border-left-style: solid;
}

.bookmark,
.edge {
  display: inline-block;
}

<div ></div>
<div ></div>

CodePudding user response：

Increasing the margin-top property to 120px of the bookmark class can do the trick.

That said, a better approach would be to wrap it all in a relative div, and if needed, set .bookmark as position: absolute. This way you can control the position easily using the properties top, left, right and bottom. Take a look at the following code:

.bookmark {
  width:0; 
  height: 350px; 
  border: 35px solid rgb(236, 236, 236);
  border-bottom:30px solid transparent;
  opacity: .9;
  position: absolute; 
  left:50px; 
}

.edge {
  width: 5px;
  height: 500px;
  border-left-style: solid;
}

.bookmark, .edge {
  display: inline-block;
}
.wrapper {
  position: relative;
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<body>
  <div >
    <div ></div>
    <div ></div>
  </div>
</body>
</html>