Естесно друг с другом, смертные лишь дают повод поболтать.)
Второе если по-дедовски и в лоб, то примерно так:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{margin:0; padding:0;}
.black{
background: linear-gradient(to right, #eee 0%,#eee 50%,#000 50%,#000 100%);
color: #eee ;
width: 50%;
position: relative;
margin: 25px auto;
overflow: hidden;
resize: both;
}
.white{
color: #000;
width: 200%;
pointer-events: none;
}
.clip{
pointer-events: none;
top:0;
left:0;
bottom:0;
right:50%;
position: absolute;
overflow:hidden;
}
</style>
</head>
<body>
<div class="black">
<div class="clip">
<div class="white">
Между тем, подобно тому, как сам дух не есть нечто абстрактно-простое, а есть система движений, в которой он различает себя в моментах, но в самом этом различении остается свободным, и подобно тому, как он вообще расчленяет свое тело по различным отправлениям и каждую отдельную часть тела определяет только для одного отправления, точно так же можно представить себе и то, что текучее бытие его внутри-себя-бытия есть бытие расчлененное и, по-видимому, его так и нужно представлять...
</div>
</div>
Между тем, подобно тому, как сам дух не есть нечто абстрактно-простое, а есть система движений, в которой он различает себя в моментах, но в самом этом различении остается свободным, и подобно тому, как он вообще расчленяет свое тело по различным отправлениям и каждую отдельную часть тела определяет только для одного отправления, точно так же можно представить себе и то, что текучее бытие его внутри-себя-бытия есть бытие расчлененное и, по-видимому, его так и нужно представлять...
</div>
</body>
</html>
Первое и третье - лениво делать.